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();
    }
 }

Angular：页面标题服务仍在导航上发生更改

1 个答案: