Question

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

但是在Angular2中，官方网站上的快速启动应用程序使index.html完全静态（css，meta，...），只留下app标签与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插件，使用它可以在路径的data属性中添加元信息：

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!',
      }
    }
  }
  ...
];

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

...
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中动态更改页面

2 个答案: