Angular 角度4-@ViewChild组件未定义

我有一个toast通知组件，名为

toast组件

，我想从任何其他组件调用它。我是这样实现的：

toast组件

：

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>

调用

someSaveMethod（）

方法时，我会得到一个错误，即

toast

未定义

---

如果我将

从

app.component.html

中取出，并将其放在

user management.component.html

的顶部，它工作正常，但随后我必须将其放在每个组件中。我怎样才能让它工作呢？

因为在您的情况下，

ToastComponent

在父代（

AppComponent

）中使用，所以您会出现此错误。避免此错误的一种方法是使用某些共享服务中定义的

Subject

。我在我的项目中使用这种方法来显示toast通知。以下是您如何做到这一点：

---

将您的

保存在

app.component.html

中

定义一个服务以基本上发出一个事件，并在您的

ToastComponent

中订阅该事件。比如说,

实用服务：

现在，您可以从所需的任何组件调用

UtilityService

的

showtoos（）

方法。比如说,

用户管理组件

---

在哪里调用

someSaveMethod

？尝试使用

console.log（）

语句检查在调用

someSaveMethod

EventEmitter

之前是否调用了

ToastComponent

的构造函数。一个

可观察的

或

受试者

也会这样做

EventEmitter

应该只用于

@Output（）

s。因为它在我的服务中也没有任何问题，所以@GünterZöchbauer不知道这一点。谢谢在这里更新我的代码也可以使用

Subject

来代替。目前它正在工作，因为

EventEmitter

只是扩展了

Subject

（AFAIR），但是Angular团队可以在不事先通知的情况下将其更改为仍然适用于

@Output（）

但可能会中断其他用途，因为

@Output（）

是唯一应该用于

EventEmitter

的东西。@GünterZöchbauer感谢您提供的详细信息，+1

export class UserManagementComponent implements OnInit {

  @ViewChild(ToastComponent) toast: ToastComponent;

  constructor() {}

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

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);
    }
}

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
  }
}

export class UserManagementComponent implements OnInit {

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

  constructor(private readonly utilityService: UtilityService) {}

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