在导航到 Angular 2 组件中的路由时传递@Input 并订阅@Output
Passing @Input and subscribing to @Output while navigating to a Route in Angular 2 Component
当我们导航到路由并加载组件时,
- 我们可以在加载的子组件中传递装饰有
@Input
的变量吗?我们可以订阅装饰有 @Output
的 EventEmitter
吗?
- parent中是否有
lifecycle Hook
可用,其中定义了Route,我们可以获取对加载组件的引用,从而动态地将values\subscribe函数传递给子组件?
父组件
@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
输入和输出不能用于路由组件,因为它们只能应用于同一模板文件中的子组件。
当我们导航到路由并加载组件时,
- 我们可以在加载的子组件中传递装饰有
@Input
的变量吗?我们可以订阅装饰有@Output
的EventEmitter
吗? - parent中是否有
lifecycle Hook
可用,其中定义了Route,我们可以获取对加载组件的引用,从而动态地将values\subscribe函数传递给子组件?
父组件
@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
输入和输出不能用于路由组件,因为它们只能应用于同一模板文件中的子组件。