Angular 發射到路由器插座

Question

我在父組件中有路由器出口，想從子組件發出，但父組件 function 從未被觸發？

子組件

@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 也不起作用 請幫忙

Answer 1

您不能在 router-outlet 指令上使用自定義事件。
router-outlet 指令有兩個事件。
activate - 當組件加載到路由器中時
deactivate - 當組件從路由器中卸載時
文檔

對於您的場景，您可以使用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);
   })
}