谷歌搜索结果通过TitleTag和<meta name="description"..."/>标签显示.该<title>-Tag是通过Angular2 editiable 如何更改网页标题中angular2路由器
剩下的就是描述.
是否可以在angular2中编写一个指令,它操纵<head>页面部分的元标记.
因此,根据所选路线,元描述会发生变化,如:
<meta name="description" content="**my description for this route**"/>
每当我点击或浏览URL栏中的链接时,我想更改页面的标题.如何使用Angular路线改变它？我正在使用角度版本4和角度cli.
我认为应该很容易,但我找不到.
我有类似的东西
<html>
<head>
<title>{{'a' + 'b'}}</title>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
好像我无法访问外面的任何东西my-app.
在角度1.x中它很容易,我能够添加ng-app任何元素(<html ng-app="myApp">).
现在我想我只能在体内引导.
我知道我可以手动引导某种方式(没有尝试),但动态更改单页应用程序中的标题应该是超级简单的,不应该吗？
我正在通过关于路由的Angular 2文档.我有一个示例应用程序,它显示了两个组件,这些组件被路由并连接到导航链接. 这是一个展示行为的Plunker.它是在Typescript中使用Angular 2构建的.
这是主要的'app.component.ts'代码:
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {CrisisCenterComponent} from './crisis-center/crisis-center.component';
import {HeroListComponent} from './heroes/hero-list.component';
import {HeroDetailComponent} from './heroes/hero-detail.component';
import {DialogService} from './dialog.service';
import {HeroService} from './heroes/hero.service';
@Component({
selector: 'my-app',
template: `
<h1 class="title">Component Router</h1>
<nav>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
providers: [DialogService, HeroService],
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ // Crisis Center child route
path: '/crisis-center/...',
name: 'CrisisCenter',
component: CrisisCenterComponent,
useAsDefault: true
}, …