路由器出口中的事件发射器，用于从子级到父级获取价值

Question

I have my parent component looks like this

<div class='placeholder'>
  <router-outlet (newItemEvent)="changeLoadText($event)"></router-outlet>
</div>

I am trying to get some value from child component.

So in the child component Ts file I have created below function to handle the emitted event.

  changeLoadText(newLoadingText:string) {
    this.loadingText=newLoadingText;
  }



  @Output() newItemEvent = new EventEmitter<string>();   
  changeLoadText(value:string){
    this.newItemEvent.emit(value);
  }

So I am calling the above changeLoadText in few functions in the child component to update spinner text in parent.

So in parent ts file I have created below method to handle emitted event from child

  changeLoadText(newLoadingText:string) {
    this.loadingText=newLoadingText;
  }

But it shows a compile error

Error: src/app/pages/dashboard/dashboard.component.html:13:51 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'string'.

13     <router-outlet (newItemEvent)="changeLoadText($event)"></router-outlet>

I didnt understand what I did wrong. Is it because router-outlet is not that something to handle emitted event from child??

Answer 1

The router outlet has two events activate and deactivate that emit your component ref.

Angular documentation - Router Outlet

Stackblitz - Router basic example dvsmnx

So, In your case, If you have loadingText property in your child component

Child TS

loadingText:string = 'some text';

And your parent component is catching the activate event with changeLoadText function

Parent HTML

<div class='placeholder'>
  <router-outlet (activate)="changeLoadText($event)"></router-outlet>
</div>

Then you can have your data using the component reference

Parent TS

  changeLoadText(CompRef:any) {
    let ChildText:string = CompRef?.loadingText;
    console.log(ChildText); // 'some text'
  }