在 Angular2 中动态更改页面 <Head>

Question

在 AngularJS 1 中，我们只需在 HTML 标记顶部添加 ng-app 并绑定服务以动态更改元数据。

但在 Angular2 中，官方站点中的快速启动应用程序使 index.html 完全静态（css、元、...），只留下应用程序标签与 bootstrap() 绑定

现在，当我们想要构建许多具有不同样式和 js 插件、meta 关键字的面板时，我们该怎么做...

Answer 1

更新

现在还有允许修改元标记的Meta服务

https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html

原创

Angular 目前没有内置支持。 <head>.

中（几乎）完全支持元标记和其他内容存在一个悬而未决的问题

目前只有使用 Title 服务的 <title> 标签的内置支持。

constructor(private title:Title) {
}

updateTitle(title:string) {
  this.title.setTitle(title);
  console.log(this.title.getTitle());
}

Answer 2

我刚刚发布了@ngx-meta/core插件，使用它你可以在路由数据属性中添加元信息：

const routes = [
  {
    path : 'home',
    component : HomeComponent,
    data : {
      meta : {
        title : 'Sweet home',
        description : 'Home, home sweet home... and what?',
      }
    }
  },
  {
    path : 'duck',
    component : DuckComponent,
    data : {
      meta : {
        title : 'Rubber duckie',
        description : 'Have you seen my rubber duckie?',
      }
    }
  },
  {
    path : 'toothpaste',
    component : ToothpasteComponent,
    data : {
      meta : {
        title : 'Toothpaste',
        override : true, // prevents appending/prepending the application name to the title attribute
        description : 'Eating toothpaste is considered to be too healthy!',
      }
    }
  }
  ...
];

如果您想覆盖路由配置中提供的值，可以通过编程方式设置元信息 - 只需在组件中 class:

...
import { Component, OnInit } from '@angular/core';
import { MetaService } from '@ngx-meta/core';
...

@Component({
  ...
})
export class ItemComponent implements OnInit {
  ...
  constructor(private metaService: MetaService) { }
  ...
  ngOnInit() {
    this.item = //HTTP GET for "item" in the repository
    this.metaService.setTitle(`Page for ${this.item.name}`);
    this.metaService.setTag('og:image', this.product.imageUrl);
  }
}

您可以在 @ngx-meta/core github 存储库中找到详细说明。此外，源文件可能有助于引入自定义逻辑。

在 Angular2 中动态更改页面 <Head>

Dynamically Change Page <Head> In Angular2

angularjs

angularjs-directive

angular2-routing

angular