角度发射到路由器出口答案

【问题标题】：Angular Emit to router-outlet角度发射到路由器出口
【发布时间】：2021-01-07 13:41:42
【问题描述】：

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

子组件

@Output() setTitle: EventEmitter<string> = new EventEmitter<string>();

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

在父 html 中

<div class="panel-body">
    <div (setTitle)='setTitle($event)'></div>
    <router-outlet (setTitle)='setTitle($event)'></router-outlet>
</div>

父 ts 文件

setTitle(title){
    console.log(title)
}

即使是简单的 div 也不起作用请帮忙

【问题讨论】：

你想在onClick函数中发射路由器插座吗？
我在父级中有路由器插座。数据不是从孩子那里进来的
@user2837961 我的解决方案对你有用吗？
@Vikas 是的。感激不尽
欢迎朋友 :) 乐于助人

标签： angular

【解决方案1】：

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

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

<div class="panel-body">
    <div (setTitle)='setTitle($event)'></div>
    <router-outlet (activate)='onActivate($event)'></router-outlet>
</div>

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

onActivate(componentReference) {
   //Below will subscribe to the searchItem emitter
   componentReference.setTitle.subscribe((data) => {
      this.setTitle(data);
   })
}

【讨论】：