在 Angular 10 中，动态路由是否可以有不同的数据答案

【问题标题】：In Angular 10 is it possible to have different data for dynamic routes在 Angular 10 中，动态路由是否可以有不同的数据
【发布时间】：2022-01-08 02:31:06
【问题描述】：

考虑以下动态路线：

export const routes: Routes = [ 
{  
    path: 'template/:templateId',
    component: TemplateComponent,
    data: { pageTitle: 'TEMPLATES'}
}]

是否可以为相同的路由和相同的组件拥有动态页面标题？

示例：
如果 URL 是“template/01”，那么我需要将数据中的 pageTitle 设置为“TEMPLATES-01”。
如果 URL 是“template/02”，那么我需要将数据中的 pageTitle 设置为“TEMPLATES-02”。

在这种情况下，路径保持不变 'template/:templateId' 组件也保持不变 'TemplateComponent' 但 URL 更改为 'template/01' 和 'template/02'。

【问题讨论】：

也许？：angular.io/guide/set-document-title#use-the-title-service

标签： javascript angular typescript routes

【解决方案1】：

我想说Resolver 可能是一个合理的解决方案。它可以采用 ActivatedRouteSnapshot 的参数，并从它的解析函数返回一个与路由匹配的标题。

路线的用法是这样的：

export const routes: Routes = [
{
    path: 'template/:templateId',
    component: TemplateComponent,
    resolve: { pageTitle: TemplateResolveService },
}]

【讨论】：

【解决方案2】：

您可以使用@angular/platform-browser 中的Title 来做到这一点（正如 R. Richards 间接指出的那样）

您可以在本地进行更改（在初始化的每个组件中 - ngOnInit，但这将是重复的并且更改每个标题 - 如果需要，将成为一项耗时的工作），或者您可以制作一个更改标题的服务基于ActiveRoute的页面的

【讨论】：