在 angular cli 中，如何向路由添加元数据，例如标题和描述标签

Question

在 angular cli 中如何向路由添加元数据，例如标题和描述标签？

这些是我的路线：

import { Route} from '@angular/router';
import { HomeComponent } from './home.component';

export const HomeRoutes: Route[] = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'home',
    component: HomeComponent
  }
];

我想为这些路线添加标题和描述，以便在浏览器中看到它们，例如每条路线的标题。

此外，我希望它们能够被机器人拾取，例如google 搜索引擎优化机器人。

我将 angular cli 与 webpack、angular 版本 4 和打字稿一起使用。

当前错误：

Answer 1

有一个 npm 模块 ng2-metadata [https://www.npmjs.com/package/ng2-metadata] 它将满足需要。

示例代码。

export const routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: {
      metadata: {
        title: 'Sweet home',
        description: 'Home, home sweet home... and what?'
      }
    }
  },
  {
    path: 'duck',
    component: DuckComponent,
    data: {
      metadata: {
        title: 'Rubber duckie',
        description: 'Have you seen my rubber duckie?'
      }
    }
  },
  {
    path: 'toothpaste',
    component: ToothpasteComponent,
    data: {
      metadata: {
        title: 'Toothpaste',
        override: true, // prevents appending/prepending the application name to the title attribute
        description: 'Eating toothpaste is considered to be too healthy!'
      }
    }
  }
  ...
];

将此添加到 app.module.ts

 imports: [
    ...
    RouterModule.forRoot(routes),
    MetadataModule.forRoot()
  ],

并将其注入到组件构造函数中。

  constructor(private metadataService: MetadataService) { }

Answer 2

作为作者ng2-metadata和@ngx-meta/core的项目，建议大家看看在包描述（README 文件），因为 README 文件在大多数情况下包含最新信息。

折旧警告 npm page of ng2-metadata, saying that the project is deprecated, no longer maintained and now continues at @ngx-meta/core。

如果您使用 @ngx-meta/core 进行切换，您会发现您在此处描述的当前问题已得到解决。

关于@ngx-meta/core：@ngx-meta/core是[=10=的继承者]，实际发布的是v0.4.x和v0.2.x.

If you're using @angular v4.x.x, use the latest release of v0.4.x ([master] branch).

目前 Angular 4 的最新版本是 v0.4.0-rc.1。

If you're using @angular v2.x.x, use the latest release of v0.2.x ([v0.2.x] branch).

目前 Angular 2 的最新版本是 v0.2.0-rc.5。

在 angular cli 中，如何向路由添加元数据，例如标题和描述标签

In angular cli how can you add meta data to routes e.g. title and description tags

webpack

reflect-metadata

angular-cli

angular