本文介绍了在导航到Angular 2组件中的路径时传递@Input并订阅@Output的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我们导航到路线并加载零部件时,
When we navigate to a route and load components,
- 是否可以在加载的子组件中传递以
@Input
修饰的变量,是否可以预订以@Output
修饰的EventEmitter
? - 在父级中是否有可用的
lifecycle Hook
,其中定义了Route,我们可以获取对已加载组件的引用,以便将value \ subscribe函数动态传递给子组件?
- 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?
父组件
@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
提前谢谢!
推荐答案
只需使用共享服务进行组件之间的通信.另请参见 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
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.
这篇关于在导航到Angular 2组件中的路径时传递@Input并订阅@Output的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!