Angular 4: el componente @ViewChild no está definido
Tengo un componente de notificación de brindis llamadoToastComponent
que quiero llamar desde cualquier otro componente. Lo implementé así:
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 del<router-outlet>
:
export class UserManagementComponent implements OnInit {
@ViewChild(ToastComponent) toast: ToastComponent;
constructor() {}
someSaveMethod() {
this.toast.showToast() // throws error below
}
}
Al llamar alsomeSaveMethod()
método, obtendré el error quetoast
es indefinido.
Si tomo<llqa-toast></llqa-toast>
fuera deapp.component.html
y ponerlo encima de lauser-management.component.html
, funciona bien, pero luego tengo que ponerlo en cada componente. ¿Cómo puedo hacer que esto funcione?