Search code examples
angularjstypescriptangularangular2-routingtypescript1.8

Passing @Input and subscribing to @Output while navigating to a Route in Angular 2 Component


When we navigate to a route and load components,

  1. Can we pass variable decorated with @Input in loaded child component and can we subscribe to EventEmitter decorated with @Output ?
  2. Is there any lifecycle Hook available in parent, where Route is defined and we may get a reference to loaded component, so as to pass values\subscribe functions to child component dynamically?

Parent Component

   @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?
  }

Child Component

  @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("");
   }
 }

I am using Angular2 RC1

Thanks in advance!


Solution

  • Just use a shared service for communication between components. See also https://angular.io/docs/ts/latest/cookbook/component-communication.html#bidirectional-service

    Inputs and outputs can't be used for routed components, as they can only be applied to child components that are within the same template file.