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