在角度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中，如何將元數據添加到路由例如標題和描述標籤

回答

相關問題