Angular2 使用 @Inputs 和 s

我的页面中有一个子导航，它在公共主视图下方显示一些子视图。我想通过将一个对象传递给子视图<router-outlet>这样我就可以在主组件中检索数据一次，然后与我的子组件共享它。

注意：如果我包含该指令<one></one> in the 主要.html它有效，但这不是我想要的行为。

主视图：

<h1>Details</h1>   
<a [router-link]="['./sub1']">One</a> | 
<a [router-link]="['./sub2']">Two</a> | 
<a [router-link]="['./sub3']">Three</a>   
<hr/>  
<router-outlet [data]="maindata"></router-outlet>

子视图 1：

<h2>{{ data.name }}</h2>
...

主视图：

@Component({
    selector: 'main-detail',
    directives: [ROUTER_DIRECTIVES],
    templateUrl: './main.html'
})
@RouteConfig([
    { path: '/', redirectTo: '/one' },
    { path: '/one', as: 'One', component: OneComponent },
    { path: '/two', as: 'Two', component: TwoComponent },
    { path: '/three', as: 'Three', component: ThreeComponent }
])
export class MainComponent {
    maindata: Object = {name:'jim'};
}

子视图 1：

@Component({
    selector: 'one',
    directives: [CORE_DIRECTIVES],
    inputs: ['data'],
    templateUrl: './one.html'
})
export class OneComponent {
    @Input() data;
}

如果是简单数据，您可以传递它们路由参数 https://angular.io/docs/ts/latest/api/router/RouteParams-class.html

<a [router-link]="['./sub3'],{name:'jim'}">Three</a>

然后在你的子视图中

@Component({
    selector: 'one',
    directives: [CORE_DIRECTIVES],
    templateUrl: './one.html'
})
export class OneComponent {
    data: any;
  constructor(params: RouteParams){
    this.data = params.get('data');
  }
}

您还可以通过将 RouterConfig 移动到组件内部来设置路由始终从组件传递参数（注意，这不是通常的做法）:

export class AppCmp {
  history: string[] = [];
  constructor(public list: PersonalizationList,
              private router_: Router) {
    list.get('histoy', (response) => {
      this.history = response;
    });
    router_.config([
      { path: '/', component: HomeCmp, as: 'Home', data: this.history },
      { path: '/about', component: AboutCmp, as: 'About' }
    ]);
  }
}

归功于来源 https://stackoverflow.com/a/34290879/1251604

如果您要做一些更复杂的事情，我建议使用服务在路由/组件之间进行通信。这实际上是我更喜欢的方式。

样品服务：

import {Injectable} from 'angular2/angular2';

@Injectable()
export class CarsService {
  list1: array<any> = ['a','b','c','d'];
  list2: array<any>;

  constructor() {
    this.list2 = [1,2,3,9,11];
  }
}

如何注入服务：

export class Cars {
  constructor(cars:CarsService) {
    this.cmpList1 = cars.list1;
    this.cmpList2 = cars.list2;
  }
}

这样，您就可以使用该服务进行通信，而无需考虑父母/孩子或其他奇怪的限制。