javascript - Angular:页面标题服务在导航上仍会发生变化

Question

我面临浏览器导航按钮的问题。 该场景就像我有动态页面标题服务，可以通过路由更改浏览器标题。

当用户登录网站然后注销时。但现在如果用户按浏览器的后退按钮就可以在浏览器标题栏上看到访问过的页面。

@Component({
  selector: 'app-title',
  template: '<span></span>'
})
export class TitleComponent {
  constructor(private router: Router, private route: ActivatedRoute, private titleService: Title) {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(() => {
        let currentRoute = this.route.root;
        let title = '';
        do {
          const childrenRoutes = currentRoute.children;
          currentRoute = null;
          childrenRoutes.forEach(routes => {
            if (routes.outlet === 'primary') {
              title = routes.snapshot.data.title;
              currentRoute = routes;
            }
          });
        } while (currentRoute);
        if (title !== undefined ) {
          this.titleService.setTitle(title + ' | ParadiseXTrades');
        }
      });
  }
}

上面是我的标题服务，路由示例如下，

  {
    path: "dashboard",
    component: DashboardComponent,
    data: {
      title: "Dashboard",
      icon: "icon-view-grid",
      caption: "lorem ipsum dolor sit amet, consectetur adipisicing elit",
      status: true
    }
  }

请随时在有关该问题的评论中提出问题。

Answer 1

您可能需要取消订阅 TitleComponent 中的路由订阅，更新 TitleComponent 以实现 OnDestroy 并在其中取消订阅:

import { Subscription } from 'rxjs';

export class TitleComponent implements OnDestroy {
    private routeSub: Subscription;
    constructor(private router: Router, private route: ActivatedRoute, private titleService: Title) {
         this.routeSub = this.router.events
         .filter(event => event instanceof NavigationEnd)
         .subscribe(() => {
            let currentRoute = this.route.root;
            let title = '';
            do {
              const childrenRoutes = currentRoute.children;
              currentRoute = null;
              childrenRoutes.forEach(routes => {
                if (routes.outlet === 'primary') {
                  title = routes.snapshot.data.title;
                  currentRoute = routes;
                }
              });
            } while (currentRoute);
            if (title !== undefined ) {
              this.titleService.setTitle(title + ' | ParadiseXTrades');
            }
          });
      }

    public ngOnDestroy() {
      this.routeSub.unsubscribe();
    }
 }