从Angular 2中的路由子组件更新父组件标题[重复]

一尘不染

从Angular 2中的路由子组件更新父组件标题[重复]

angularjs

我正在遍历有关Angular2的文档。我有一个示例应用程序，其中显示了路由和连接到导航链接的两个组件。
这是一个演示行为的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>）标题“组件路由器”替换为要呈现的“视图”的名称。因此，当您单击“危机中心”时，标题应为“危机中心”；当您单击“英雄”时，标题应显示“英雄”。

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

谁能建议最好的（最像Angular-docs一样）的方式来做到这一点？

非常感谢。

阅读 254

2020-07-04

共1个答案

一尘不染

这是我的方法：

-首先，创建一个服务，该服务将负责在组件之间共享路由名称。并创建一个新的主题 “主题同时作为可观察者和观察者”

import {Injectable} from 'angular2/core';
import {Subject} from 'rxjs/Rx';

@Injectable()
export class RouteNames{
  public name = new Subject();
}

-其次，通过将其注入引导程序来在应用程序级别提供服务：

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');
  }
}

就是这样，这里正在工作

2020-07-04