gpt4 book ai didi

angularjs - 从 Angular 2 中的路由子组件更新父组件标题

转载 作者:太空狗 更新时间:2023-10-29 17:30:52 26 4
gpt4 key购买 nike

<分区>

我正在研究 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 { }

我想要做的是用正在呈现的“ View ”的名称替换主(<h1>)标题“Component Router”。所以当你点击“危机中心”时,标题应该是“危机中心”;当您单击“英雄”时,标题应显示为“英雄”。

我不想将标题移到子组件模板中 - 我想将它保留在 HTML 页面的顶部,最好只在一个模板中。

谁能建议最好的(最像 Angular 文档的)方法来完成这个?

非常感谢。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com