4

在 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 机器人）接收。

我正在使用带有 webpack、角度版本 4 和打字稿的 angular cli。

当前错误：

在此处输入图像描述

4

2 回答 2

2

有一个 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) { }
于 2017-04-13T16:26:08.967 回答
0

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

的npm 页面上有一个折旧警告，说该项目已弃用，不再维护，现在继续在.ng2-metadata@ngx-meta/core

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

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

如果您正在使用，请使用( [master] branch )@angular v4.x.x的最新版本。v0.4.x

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

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

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

于 2017-04-14T11:50:58.467 回答