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 seo bots。

我使用带有webpack的角度cli，角度版本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 项目，我建议您查看包装说明（< strong> README 文件），因为 README 文件在大多数情况下都包含最新信息。

ng2-metadata 的npm page上有折旧警告，表示该项目已弃用，已不再维护，现在继续@ngx-meta/core。

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

关于 @ngx-meta/core ： @ngx-meta/core 是 ng2-metadata 的继承者，以及实际版本是 v0.4.x 和 v0.2.x 。

如果您正在使用@angular v4.x.x，请使用最新版本的v0.4.x（ [master]分支）。

截至目前，Angular 4的最新版本为v0.4.0-rc.1。

如果您正在使用@angular v2.x.x，请使用最新版本的v0.2.x（ [v0.2.x]分支）。

截至目前，Angular 2的最新版本为v0.2.0-rc.5。

在angular cli中，如何将元数据添加到路由中，例如标题和说明标签

2 个答案: