在角度cli中，如何将元数据添加到路由例如标题和描述标签

在角度cli中，您如何向路由添加元数据标题和说明标签？在角度cli中，如何将元数据添加到路由例如标题和描述标签

这是我的路线：

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

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

我想标题和描述添加到这些途径，使他们在浏览器中看到如每条路线的标题。

此外，我希望它们能被机器人拾取，例如，谷歌SEO机器人。

我正在使用与webpack，角度版本4和打字稿的角度cli。

电流误差：

来源

2017-04-13 AngularM

路由上有一个'data'属性。这可能值得研究。它被定义为：*数据是通过ActivatedRoute *提供给组件的附加数据。不管什么意思。 :)没有在angular.io上找到一个很好的例子。 –

有一个NPM模块NG2的元数据[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-13 16:26:08

谢谢，我需要添加到角度cli Json文件中的链接是什么？ – AngularM

链路在答复中提到，包括这个js'node_modules/NG2的元数据/包/ NG2-metadata.umd.min.js' 在角cli.json –

我添加了链路：node_modules/NG2的元数据/bundles/ng2-metadata.umd.min.js添加到angular-cli.json的脚本部分。但是，当我做到这一点bash命令：“NG建立--prod --aot --output散列=无”我得到这个错误：“错误多脚本加载器” – AngularM

由于笔者ng2-metadata和@ngx-meta/core项目，我建议你看一看包装说明（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。

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截至目前。

来源

2017-04-14 11:50:58

在角度cli中，如何将元数据添加到路由例如标题和描述标签

回答

相关问题