angular发射到路由器出口


Angular Emit to router-outlet

我在父组件中有router-outlet，想从子组件发射，但父组件函数从未被触发？

子组件

1
2
3
4
5
@Output() setTitle: EventEmitter<string> = new EventEmitter<string>();

ngOnInit() {
    this.setTitle.emit('test');
}

在父 html

1
    <router-outlet (setTitle)='setTitle($event)'></router-outlet>

父 ts 文件

1
2
3
setTitle(title){
    console.log(title)
}

即使是简单的 div 也不行
请帮忙

相关讨论

您不能在 router-outlet 指令上使用自定义事件。
router-outlet 指令有两个事件。
activate - 当组件加载到路由器时
deactivate - 从路由器卸载组件时
文档

对于您的场景，您可以利用 activate 事件当子组件加载时，onActivate 将被触发，您将获得组件引用

1
    <router-outlet (activate)='onActivate($event)'></router-outlet>

通过组件引用可以观察到事件发射器

1
2
3
4
5
6
onActivate(componentReference) {
   //Below will subscribe to the searchItem emitter
   componentReference.setTitle.subscribe((data) => {
      this.setTitle(data);
   })
}