从父节点访问路由器出口组件
从父节点访问路由器出口组件
提问于 2017-08-16 18:29:57
我有以下应用程序根目录：
@Component({
selector: 'my-app',
providers: [],
templateUrl: `<button (click)="callChildFunction()">Close</button>
<router-outlet></router-outlet>`
})
export class AppComponent {
constructor() {
}
callChildFunction(){
// Call myFunction() here
}
}下面是我的子组件(在router-outlet中使用的组件)：
@Component({
selector: 'child',
providers: [],
templateUrl: `<div>Hello World</div>`
})
export class ChildComponent {
constructor() {
}
myFunction(){
console.log('success');
}
}我发现我可以使用RouterOutlet获取组件函数，但在应用程序根目录中似乎无法访问它。
如何从应用程序根目录调用myFunction()？
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-08-16 19:07:59
使用相同的activate事件。每当我们在路由器出口中加载组件时，就会发出一个激活事件，利用该事件获取组件引用并调用相应的方法。
父组件
<div class="container">
<router-outlet (activate)="onActivate($event)"></router-outlet>
</div>模板
onActivate(componentRef){
componentRef.works();
}儿童公司
works(){
console.log("works");
}Stack Overflow用户
发布于 2019-05-12 19:45:51
@Rahul Singh的一个小的补充--很好的答案：
确保检查哪个组件实例在
(保留Rahul的例子) onActivate(componentRef)方法，
只有当组件确实具有这样的方法**时，才调用works()**，。
示例：
onActivate(componentRef){
if(componentRef instanceof ChildWithWorksMethodComponent){
componentRef.works();
return;
}
console.log("This is not the ChildWithWorksMethodComponent");
} 否则，每次导航到没有这种方法的路由时，控制台日志都会出现以下错误：
错误TypeError: componentRef.works不是一个函数
Stack Overflow用户
发布于 2017-08-16 18:36:25
路由器-出口与路由有关，它与访问子组件无关，methods.You必须使用@ViewChild从parent.You访问子组件函数，可以找到示例这里。
更新
如果在您的情况下上面不是一个可行的解决方案，您可以点击activate事件来获得路由器出口内实例化组件的引用。
从医生那里
当一个新组件被实例化时，路由器出口会发出一个激活事件，当一个新组件被销毁时，它会发出一个停用事件。
因此，您可以使用这些特性并完成您的工作，done.You可以看到详细的答案这里，并在相同的答案中附加一个柱塞。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45720655
复制相关文章
相似问题
腾讯云开发者
