Angular 4-@ViewChild组件未定义 [英] Angular 4 - @ViewChild component is undefined

问题描述

我有一个名为ToastComponent的敬酒通知组件，我想从任何其他组件中调用它.我是这样实现的:

I have a toast notification component called ToastComponent which I want to call from any other component. I implemented it like this:

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:

export class UserManagementComponent implements OnInit {

  @ViewChild(ToastComponent) toast: ToastComponent;

  constructor() {}

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

在调用someSaveMethod()方法时，会出现错误，提示toast未定义.

On calling the someSaveMethod() method, I'll get the error that toast is undefined.

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

If I take <llqa-toast></llqa-toast>out of the app.component.html and put it on top of the user-management.component.html, it works fine, but then I have to put it in every component. How can I get this to work?

推荐答案

由于在您的情况下，ToastComponent用于大父级(AppComponent)，因此才出现此错误.避免此错误的一种方法是使用某些共享服务中定义的Subject.我在项目中使用这种方法来显示吐司通知.这是您的操作方法:

Since in your case, the ToastComponent is used in the grand parent (AppComponent), that's why you are getting this error. One way to avoid this error is to use Subject defined in some shared service. I am using that approach in my project to show toast notifications. Here is how you can do it:

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

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

Define a service to basically emit an event and subscribe to that event in your ToastComponent. For example,

UtilityService:

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

You need to inject this service in your AppModule providers. Now subscribe to the OnShowToast event in your ToastComponent.

ToastComponent:

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

Now, you can call the showToast() method of the UtilityService from any component you want. For example,

UserManagementComponent

UserManagementComponent

export class UserManagementComponent implements OnInit {

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

  constructor(private readonly utilityService: UtilityService) {}

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

这篇关于Angular 4-@ViewChild组件未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！