带有路由器事件的页面标题在 Angular2 中返回相同的标题

Question

我使用来自AppComponent 的路由器事件跟踪路线并更改标题，如下所示。 应用路由模块

  { path: 'Home', component: ErrorComponent, data: {  title: 'Home Page' } },
  { path: 'Login', component: LoginComponent, data: {  title: 'Login' } },
  { path: 'ForgotPassword', component: ForgotComponent, data: {  title: 'Forgot Password' } },

  { path: 'Register', component: RegisterComponent, data: {  title: 'New Registration' } },
  { path: 'Register/:id', component: RegisterComponent, data: {  title: 'Update Profile' } }

在这里，如果我导航到 Home、Login、ForgotPassword 之间，一切正常，但是当导航到 Register 一次时，然后导航到任何其他页面，它会为我提供所有进一步导航的 Register Page 标题。

应用组件

constructor(private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title) {
    this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd),
      map(() => this.activatedRoute),
      map((route: any) => {
        while (route.firstChild) route = route.firstChild;
        return route;
      }),
      filter((route) => route.outlet === 'primary'),
      mergeMap((route: any) => route.data)).subscribe((event) => {
        this.titleService.setTitle(event['title']);
        console.log('Page Title', event['title']);
      });
  }

我在这里缺少什么？我正在使用 Angular 7。

Answer 1

我建议您可以使用以下方法在每次路线更改时使用动态标题

这对我来说很好用

首先创建新的.ts file，命名为

page-titles.ts

在root folder的constants文件夹中（或任何你想要的地方）

export const DETAILS = {
    HOME_PAGE: {
        title: 'Millions of reviews analyzed & ranked',
        meta: 'cc analyzes all reviews from all review sites and shows you what other consumers find important.',
    },
    SEARCH_REVIEW: {
        title: 'Search Results -test.com',
        meta: '',
    },
    TERMS: {
        title: 'Terms and Conditions',
        meta: '',
    },
    BLOGS: {
        title: 'The Consumerchoice Blog',
        meta: '',
    },
    BLOG_DETAILS: {
        title: 'Blog post title',
        meta: '',
    },
    PRESSES: {
        title: 'Consumerchoice in the Press',
        meta: '',
    },
    PRESS_DETAILS: {
        title: 'Press post title test',
        meta: '',
    },
    ABOUT: {
        title: 'Learn about Consumerchoice and our team',
        meta: '',
    },
    CONTACT: {
        title: 'Contact test.com',
        meta: '',
    },
    FAQS: {
        title: 'Questions and Answers',
        meta: '',
    },
    CATEGORY: {
        title: 'All test.com Categories',
        meta: '',
    },
    SERVICE_DETAILS: {
        title: 'Home | Service Details',
        meta: '',
    }
}

此文件将在此处的主常量对象中具有键对值，即DETAILS 其中DETAILS 对象的每个键代表页面名称（与特定路由关联的组件名称）因此，您无需在路由中设置数据属性

然后在您的特定路由组件中只需使用seTitle 方法来设置标题

例如，我想为Terms Page 设置标题，然后将此代码添加到该组件的构造函数中

terms.component.ts

import { DETAILS } from '../../constants/page-details';


constructor(public titleService: Title,) {

   this.titleService.setTitle(DETAILS.TERMS.title);

}

如果这对你有帮助，请告诉我！！

或只需尝试使用以下代码更新app.component.ts 的构造函数

constructor(
    public router: Router,
    public activatedRoute: ActivatedRoute,
    public titleService: Title
  ) {
    router.events
      .filter(e => e instanceof NavigationEnd)
      .subscribe((event) => {
        console.log('title from route data :', 
         activatedRoute.root.firstChild.snapshot.data['title']);
        this.title = 
         activatedRoute.root.firstChild.snapshot.data['title'];
        this.titleService.setTitle(this.title);
      })
     }