从 Angular 中路由的 child 组件更新 parent 组件标题 2
Update parent component title from routed child component in Angular 2
我正在努力完成 Angular 2 documentation on routing. I have a sample application which shows two components which are routed and hooked up to navigation links. 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>
) 标题 'Component Router' 替换为正在呈现的 'view' 的名称。所以当你点击 'Crisis Center' 时,标题应该是 'Crisis Center';当您单击 'Heroes' 时,标题应该显示 'Heroes'。
我不想将标题移到 child 组件模板中 - 我想将它保留在 HTML 页面的顶部,最好只在一个模板中。
谁能提出最好的(最Angular-docs-like)方法来完成这个?
非常感谢。
我是这样做的:
-- 首先,创建一个服务,负责在组件之间共享路由名称。并创建一个新的 Subject "subjects work as an Observable and Observer at the same time"
import {Injectable} from 'angular2/core';
import {Subject} from 'rxjs/Rx';
@Injectable()
export class RouteNames{
public name = new Subject();
}
-- 其次,通过在 bootstrap:
上注入它来在应用程序级别提供您的服务
import {RouteNames} from './route-names.service';
bootstrap(AppComponent, [ROUTER_PROVIDERS,RouteNames]);
现在,您需要做的就是将您的服务注入 app.component 以及将更改路由名称的每个组件。
app.component:订阅 RouteNames.name 主题并在接下来更新变量 routeName。
import {RouteNames} from './route-names.service';
@Component({
selector: 'my-app',
template: `
<h1 class="title">{{routeName}}</h1>
<nav>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
...
})
@RouteConfig([
...
])
export class AppComponent {
routeName = "Component Router";
constructor(private _routeNames:RouteNames){
this._routeNames.name.subscribe(n => this.routeName = n);
}
}
现在,在 CrisisCenter 上,注入 RouteNames 服务并在 RouteNames.name 上调用下一步:
从'../route-names.service'导入{RouteNames};
@Component({
...
})
@RouteConfig([
...
])
export class CrisisCenterComponent {
constructor(private _routeNames:RouteNames){
_routeNames.name.next('Crisis Center');
}
}
就是这样,这是working plunker
我正在努力完成 Angular 2 documentation on routing. I have a sample application which shows two components which are routed and hooked up to navigation links. 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>
) 标题 'Component Router' 替换为正在呈现的 'view' 的名称。所以当你点击 'Crisis Center' 时,标题应该是 'Crisis Center';当您单击 'Heroes' 时,标题应该显示 'Heroes'。
我不想将标题移到 child 组件模板中 - 我想将它保留在 HTML 页面的顶部,最好只在一个模板中。
谁能提出最好的(最Angular-docs-like)方法来完成这个?
非常感谢。
我是这样做的:
-- 首先,创建一个服务,负责在组件之间共享路由名称。并创建一个新的 Subject "subjects work as an Observable and Observer at the same time"
import {Injectable} from 'angular2/core';
import {Subject} from 'rxjs/Rx';
@Injectable()
export class RouteNames{
public name = new Subject();
}
-- 其次,通过在 bootstrap:
上注入它来在应用程序级别提供您的服务import {RouteNames} from './route-names.service';
bootstrap(AppComponent, [ROUTER_PROVIDERS,RouteNames]);
现在,您需要做的就是将您的服务注入 app.component 以及将更改路由名称的每个组件。
app.component:订阅 RouteNames.name 主题并在接下来更新变量 routeName。
import {RouteNames} from './route-names.service';
@Component({
selector: 'my-app',
template: `
<h1 class="title">{{routeName}}</h1>
<nav>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
...
})
@RouteConfig([
...
])
export class AppComponent {
routeName = "Component Router";
constructor(private _routeNames:RouteNames){
this._routeNames.name.subscribe(n => this.routeName = n);
}
}
现在,在 CrisisCenter 上,注入 RouteNames 服务并在 RouteNames.name 上调用下一步:
从'../route-names.service'导入{RouteNames};
@Component({
...
})
@RouteConfig([
...
])
export class CrisisCenterComponent {
constructor(private _routeNames:RouteNames){
_routeNames.name.next('Crisis Center');
}
}
就是这样,这是working plunker