Atualizar título do componente pai do componente filho roteado no Angular 2 [duplicado]
Esta pergunta já tem uma resposta aqui:
como alterar o título da página no roteador angular2 13 respostasEstou trabalhando no meu caminhoDocumentação do Angular 2 sobre roteamento. Eu tenho um aplicativo de exemplo que mostra dois componentes que são roteados e conectados aos links de navegação.Aqui está um Plunker demonstrando o comportamento. Ele é construído usando o Angular 2 no Typescript.
Aqui está o código principal '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 { }
O que estou procurando fazer é substituir o principal (<h1>
) título 'Component Router' com o nome da 'view' que está sendo renderizada. Então, quando você clicar em 'Crisis Center', o cabeçalho deverá dizer 'Crisis Center'; quando você clica em 'Heróis', o cabeçalho deve dizer 'Heróis'.
Não quero mover o cabeçalho para os modelos de componente filho - quero mantê-lo na parte superior da página HTML e, de preferência, apenas em um modelo.
Alguém pode sugerir a melhor maneira (como a maioria dos documentos angulares) de fazer isso?
Muito Obrigado.