When we navigate to a route and load components,
- Can we pass variable decorated with
@Input
in loaded child component and can we subscribe toEventEmitter
decorated with@Output
? - 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!
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.