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

问题描述

我正在研究 Angular 2 路由文档.我有一个示例应用程序，它显示了两个路由并连接到导航链接的组件.这是一个 Plunker 演示了这种行为.它是使用 Typescript 中的 Angular 2 构建的.

I'm working my way through the 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 demonstrating the behaviour. It's built using Angular 2 in Typescript.

这是主要的app.component.ts"代码:

Here is the main 'app.component.ts' code:

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 { }

我想要做的是用正在呈现的视图"的名称替换主 (

) 标题组件路由器".所以当你点击危机中心"时，标题应该是危机中心"；当您点击英雄"时，标题应显示为英雄".

What I'm looking to do is replace the main (<h1>) heading 'Component Router' with the name of the 'view' that's being rendered. So when you click 'Crisis Center' the heading should say 'Crisis Center'; when you click 'Heroes' the heading should say 'Heroes'.

我不想将标题移到子组件模板中 - 我想将其保留在 HTML 页面的顶部，并且最好只保留在一个模板中.

I don't want to move the heading into the child component templates - I want to keep it at the top of the HTML page and preferably only in one template.

谁能建议最好的(最类似于 Angular 文档的)方法来实现这一点?

Can anyone suggest the best (most Angular-docs-like) way to accomplish this?

非常感谢.

推荐答案

我是这样做的:

-- 首先，创建一个服务，负责在组件之间共享路由名称.并创建一个新的 Subject在同时"

-- Firstly, create a service that will be responsible for sharing the route names between components. And create a new 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 上注入它来在应用程序级别提供您的服务:

-- Secondly, provide your service at the application level by injecting it on bootstrap:

import {RouteNames} from './route-names.service';
bootstrap(AppComponent, [ROUTER_PROVIDERS,RouteNames]);

现在，您需要做的就是将您的服务注入到 app.component 和每个将更改路由名称的组件中.

Now, all you need to do is inject your service into app.component and into every component that will change the route name.

app.component: 订阅 RouteNames.name 主题并在下一步更新变量 routeName.

app.component: subscribe to RouteNames.name subject and update the variable routeName on next.

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 上调用 next:

Now, on CrisisCenter, Inject the RouteNames service and call next on RouteNames.name:

从'../route-names.service'导入{RouteNames}；

import {RouteNames} from '../route-names.service';

@Component({
  ...
})
@RouteConfig([
  ...
])
export class CrisisCenterComponent {
  constructor(private _routeNames:RouteNames){
    _routeNames.name.next('Crisis Center');
  }
}

就是这样，这是工作plunker

这篇关于从 Angular 2 中的路由子组件更新父组件标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！