在导航到 Angular 2 组件中的路由时传递 @Input 并订阅 @Output答案

【问题标题】：Passing @Input and subscribing to @Output while navigating to a Route in Angular 2 Component在导航到 Angular 2 组件中的路由时传递 @Input 并订阅 @Output
【发布时间】：2016-09-30 05:19:03
【问题描述】：

当我们导航到一个路由并加载组件时，

我们可以在加载的子组件中传递带有@Input 修饰的变量吗？我们可以订阅带有@Output 修饰的EventEmitter 吗？
父组件中是否有lifecycle Hook可用，其中定义了Route，我们可以获取加载的组件的引用，从而将值\订阅函数动态传递给子组件？

父组件

   @Component({
    moduleId: module.id,
    selector: "parent",
    templateUrl: "<router-outlet></router-outlet>"
  })
  @Routes([
   { path: "/child-component1", component: Child1Component }
  ])
  export class Parent {
   // Can we pass var1 and subscribe close here of Child1Component when route is navigated dynamically based upon path?
   // Is there any lifecycleHook available in parent where Route is defined?
  }

子组件

  @Component({
    moduleId: module.id,
    selector: "child-component1",
    template: "<div>{{var1}}</div><button (click)='closeMenu()'>Close</button>"
  })
  export class Child1Component {
   @Input() var1: string;
   @Output() close: EventEmitter<any> = new EventEmitter<any>();

   constructor() { }

   closeMenu = (): void => {
      this.close.emit("");
   }
 }

我正在使用Angular2 RC1

提前致谢！

【问题讨论】：

标签： angularjs typescript angular angular2-routing typescript1.8

【解决方案1】：

只需使用共享服务进行组件之间的通信。另见https://angular.io/docs/ts/latest/cookbook/component-communication.html#bidirectional-service

输入和输出不能用于路由组件，因为它们只能应用于同一模板文件中的子组件。

【讨论】：