angular - 特定组件 Angular 的动态标题

Question

我正在使用 Angular 8 和 Java Spring 服务器端。现在这是我的路由

{ 
  component: IndexComp
  path: "index"
},
{ 
  component: BlogComp
  path: "blog"
},
{ 
  component: ProductComp
  path: "product/:id"
},

默认标题为“Shop”，用于博客和索引页面。但在产品页面中，标题来自服务器(可能是Iphone7、Iphone8、Skirt...取决于服务器的数据)。我想知道如何更改产品页面中的标题，谢谢

Answer 1

查看来自 @angular/platform-b​​rowser 的 Title。

您可以将其注入(inject)组件中并使用 setTitle('You title string here')

例如:

  constructor(private readonly titleService: Title) {
    const title = 'Shop'; // get title data from the server
    this.titleService.setTitle(title);
  }

UPD:基于此，您可以将其放在任何您想要的地方:在解析器/组件/服务等中。

---

UPD:根据路线:例如，您可以像AppComponent中那样制作

  constructor(private readonly titleService: Title,
              private readonly router: Router) {
    this.router.events.subscribe(route => {
      if (route instanceof NavigationEnd && route.urlAfterRedirects !== '/product') {
        const title = 'Dynamic Title String Here';
        this.titleService.setTitle(title);
      } else {
        const title = 'Default Title String Here';
        this.titleService.setTitle(title);
      }
    });
  }