Angular 4 - @ViewChild组件未定义

Question

我有一个名为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未定义的错误。

如果我从app.component.html中取出<llqa-toast></llqa-toast>并将其放在user-management.component.html之上，它可以正常工作，但我必须将它放在每个组件中。我怎样才能使这个工作？

Answer 1

因为您的情况，ToastComponent用于父母（AppComponent），这就是为什么你会得到这个错误。避免此错误的一种方法是使用在某些共享服务中定义的Subject。我在我的项目中使用这种方法来显示吐司通知。这里是你如何能做到这：

---

让您在<llqa-toast></llqa-toast>app.component.html。

定义一项服务，基本上发出一个事件并订阅您的ToastComponent中的事件。例如，

UtilityService：

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs'; 

@Injectable() 
export class UtilityService { 

    public OnShowToast = new Subject<boolean>(); 

    public showToast(): void { 
     this.OnShowToast.next(true); 
    } 
} 

你需要在你的AppModule提供商注入这项服务。现在subscribe到您的ToastComponent中的OnShowToast事件。

ToastComponent：

import { UtilityService } from './path/to/the/utility.service'; 
export class ToastComponent implements OnInit { 

    constructor(private readonly utilityService: UtilityService) { } 

    ngOnInit() { 
    this.utilityService.OnShowToast.subscribe(value => 
     { 
      this.showToast(); 
     }); 
    } 

    private showToast() { 
    // some code 
    } 
} 

现在，你可以从任何你想要的组件调用UtilityService的showToast()方法。例如，

UserManagementComponent

export class UserManagementComponent implements OnInit { 

    // You dont need this now 
    // @ViewChild(ToastComponent) toast: ToastComponent; 

    constructor(private readonly utilityService: UtilityService) {} 

    someSaveMethod() { 
    this.utilityService.showToast(); 
    } 
}