Angular 4 - @ViewChild 组件未定义

Question

我有一个名为 ToastComponent 的 toast 通知组件，我想从任何其他组件调用它。我是这样实现的：

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

由于在您的情况下，祖父 (AppComponent) 中使用了 ToastComponent，这就是您收到此错误的原因。避免此错误的一种方法是使用在某些共享服务中定义的Subject。我在我的项目中使用这种方法来显示 toast 通知。以下是你可以做到的：

---

将您的<llqa-toast></llqa-toast> 保留在app.component.html 中。

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

实用服务：

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 事件。

Toast 组件：

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() 方法。例如，

用户管理组件

export class UserManagementComponent implements OnInit {

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

  constructor(private readonly utilityService: UtilityService) {}

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