я есть компонент уведомления о тостеToastComponent который я хочу позвонить из любого другого компонента. Я реализовал это так:

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 который находится внутри<router-outlet>:

export class UserManagementComponent implements OnInit {

  @ViewChild(ToastComponent) toast: ToastComponent;

  constructor() {}

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

По вызовуsomeSaveMethod() метод, я получу ошибку,toast не определено

Если я возьму<llqa-toast></llqa-toast>внеapp.component.html и положить его на вершинуuser-management.component.html, он работает нормально, но тогда я должен поместить его в каждый компонент. Как я могу заставить это работать?