Eu tenho um componente de notificação de brinde chamadoToastComponent que eu quero chamar de qualquer outro componente. Eu implementei assim:

ToastComponent:

export class ToastComponent implements OnInit {

  constructor() {}

  showToast() {
    // some code
  }
}

app.component.html:

<llqa-main-container>
  <llqa-header></llqa-header>
  <div class="content-container">
    <main class="content-area">
      <llqa-toast></llqa-toast> <!-- ToastComponent which I want to call -->
      <router-outlet></router-outlet>
    </main>
  </div>
</llqa-main-container>

UserManagementComponent que está dentro do<router-outlet>:

export class UserManagementComponent implements OnInit {

  @ViewChild(ToastComponent) toast: ToastComponent;

  constructor() {}

  someSaveMethod() {
    this.toast.showToast() // throws error below
  }
}

Ao ligar para osomeSaveMethod() método, eu vou receber o erro quetoast está indefinido.

Se eu tomar<llqa-toast></llqa-toast>Fora deapp.component.html e coloque em cima dauser-management.component.html, funciona bem, mas preciso colocá-lo em todos os componentes. Como posso fazer isso funcionar?