Angular 2 - 如何使我的 index.html 文件标题和关键字和描述的元标记动态答案

【问题标题】：Angular 2 - how do I make my index.html files title and meta tags for keywords and description dynamicAngular 2 - 如何使我的 index.html 文件标题和关键字和描述的元标记动态
【发布时间】：2016-04-16 16:02:38
【问题描述】：

Angular 2 - 如何使我的 index.html 文件标题和元标记为关键字和描述动态。

我正在使用 angular 2 的打字稿。

我的标签示例：

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>title needs to be dynamic</title>
    <base href="/"></base>

    <meta charset="UTF-8">
    <meta name="fragment" content="!"/>
    <meta name="description" content="description needs to be dynamic"/>
    <meta name="keywords" content="keywords needs to be dynamic" />

这是我的路线：

{ path: '/', component: Home, as: 'Home', data:{title: 'Welcome Home'}},

我试过了，但没用：

 <title>{{title}}</title>

【问题讨论】：

标签： javascript angularjs angular single-page-application

【解决方案1】：

有一个Title 服务。否则，您目前只能靠自己。可以使用纯 JS 功能querySelector()...
计划在<head> 中支持更多标签。
我对 SEO 并不太了解，但我认为使用服务器端解决方案来处理元标记会更好。我怀疑搜索引擎会选择在初始页面加载后添加的元标记。

Plunker（不更新窗口标题，因为应用程序在 iframe 中运行，但使用浏览器检查工具会在 <head><title>....</title></head> 中显示它）

【讨论】：

我同意。我不知道您所要求的用例是否有意义。
你有一个例子说明我如何做到这一点，因为 Angular 2 文档没有
constructor(private title:Title) {} ... doSomething() { this.title.setTitle('new title');}
标题来自哪个导入？
angular2/platform/browser

【解决方案2】：

还有@ngx-meta/core 插件，它可以帮助您动态地制作页面标题和元标记（在路由配置和类构造函数级别）。

有关说明，请参阅存储库。

【讨论】：

你可以添加一个如何与 index.html 一起工作的示例
基本上可以清空html文件中标签的内容。对于元标记，甚至可以将它们全部删除，让插件为您填充。
对于路由，您只需在路由定义期间添加元数据属性，在每个路由的“数据”属性中。您可以在存储库页面ng-metadata 找到详细文档。自述文件将通过简单的说明指导您。