2

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!

1 Answer 1

4

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.