这个问题在这里已有答案:
我正在努力通过Angular 2 documentation on routing . 我有一个示例应用程序,它显示了两个组件,这些组件被路由并连接到导航链接 . Here is a 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
},
{path: '/heroes', name: 'Heroes', component: HeroListComponent},
{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
{path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter', 'CrisisDetail', {id:3}]}
])
export class AppComponent { }
我要做的是将主要的( <h1>
) Headers 'Component Router'替换为's being rendered. So when you click '的名称's being rendered. So when you click '危机中心'; when you click '英雄' the heading should say '英雄 .
我不想将 Headers 移动到子组件模板中 - 我希望将其保留在HTML页面的顶部,最好只保留在一个模板中 .
任何人都可以建议最好的(大多数Angular-docs)方式来实现这一目标吗?
非常感谢 .
1 回答
我是这样做的:
现在,您需要做的就是将您的服务注入app.component和每个将更改路由名称的组件 .
app.component:订阅RouteNames.name主题并在下一步更新变量routeName .
现在,在CrisisCenter上,注入RouteNames服务并在RouteNames.name上调用next:
从'../route-names.service'导入;
就是这样,这里是working plunker