Обновить заголовок родительского компонента из маршрутизированного дочернего компонента в Angular 2 [дубликат]

На этот вопрос уже есть ответ здесь:



Я работаю над документацией Angular 2 по маршрутизации. У меня есть пример приложения, который показывает два компонента, которые маршрутизируются и подключаются к навигационным ссылкам. Вот плунжер , демонстрирующий поведение. Он построен с использованием Angular 2 в Typescript.



Вот главное приложение.деталь.код 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-страница и желательно только в одном шаблоне.



Может ли кто-нибудь предложить лучший (самый угловой-docs-подобный) способ для достижения этой цели?



Большое спасибо.

545   1  

1 ответ:

Вот как я это делаю:

-- Во-первых, создайте сервис, который будет отвечать за совместное использование имен маршрутов между компонентами. И создать новый субъект "субъекты работают как наблюдаемый и наблюдатель одновременно" 

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]);

Теперь все, что вам нужно сделать, это внедрить свой сервис в приложение.компонент и в каждый компонент, который изменит маршрут имя.

Приложение.компонент: подписка на RouteNames.name тема и обновить переменную routeName на 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 и вызовите next on RouteNames.name:

Импорт {RouteNames} из '../ названия маршрутов.обслуживание'; 

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

И вот он, вот рабочий плунжер

9  
2016-03-13 23:22:30

Comments

    Ничего не найдено.
Click here to cancel reply.