Typescript 在 Angular 中根据路由动态添加元描述

我用Angular 5建立了一个小册子类型的网站.到目前为止，我已经设置了路由，页面标题会根据激活的路由动态更改.我使用这个博客上的说明:https://toddmotto.com/dynamic-page-titles-angular-2-router-events

我目前正在应用程序中存储我的路由和标题.单元ts本身:

imports: [
    BrowserModule,
    RouterModule.forRoot([
      { 
        path: '', 
        component: HomeComponent,
        data: {
          title: 'Home'
        }
      },
      { 
        path: 'about', 
        component: AboutComponent,
        data: {
          title: 'About'
        } 
      },
      { 
        path: 'products-and-services', 
        component: ProductsServicesComponent,
        data: {
          title: 'Products & Services'
        }  
      },
      { 
        path: 'world-class-laundry', 
        component: LaundryComponent,
        data: {
          title: 'World Class Laundry'
        }  
      },
      { 
        path: 'contact', 
        component: ContactComponent,
        data: {
          title: 'Contact'
        }  
      },
      { 
        path: '**', 
        component: NotFoundComponent,
        data: {
          title: 'Page Not Found'
        }  
      }
    ])
  ],

我也希望将我的元描述存储在那里，如果将它们添加到data:以下就足够简单了.

我用下面的代码获取标题数据，这在上面的博客链接中有所说明:

ngOnInit() {
    this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map((route) => {
        while (route.firstChild) route = route.firstChild;
        return route;
      })
      .filter((route) => route.outlet === 'primary')
      .mergeMap((route) => route.data)
      .subscribe((event) => {
        this.titleService.setTitle(event['title']);
      });
  }

所以我的问题是，有没有办法用同样的方法动态设置元描述？如果有一种结合页面标题和元描述功能的方法，那将是理想的.

我的Angular 训练非常有限，所以这可能是个问题.我更像是一个设计师/css/html类型的人.