Angular 2 @Input:是否可以将数据从组件传递到另一个子路由组件？

Question

基于Angular 2 的文档,您可以使用@Input轻松地将数据从组件传递到另一个组件.

例如,我可以像这样设置父级:

import { Component } from '@angular/core';
import { HEROES } from './hero';
@Component({
  selector: 'hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master: string = 'Master';
}

并获取子组件中的数据,如下所示:

import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
  selector: 'hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

所以很明显,将其传递[hero]="data"给父组件的模板(当然在子选择器中)并将它们处理到子组件中.

但这是问题所在.

我的子组件DOM元素(在本例中<hero-child>)在父模板中不可用,而是在<router-outlet>元素中加载.

那么如何将数据传递给子路径组件呢？是不是输入正确的方法？我想避免使用double,treble等调用来获取我父路由/组件中已有的相同数据.

Answer 1

考虑创建一个 Angular2 服务，@Input()或者@Output()将其传递到多个层或不相关的组件。