0

这是我试图访问子组件中的变量的组件。父级是应用程序组件，子级称为 LoginComponent

import { AfterViewInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { LoginComponent } from './login/login.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

    @ViewChild(LoginComponent)
    private loginComponent: LoginComponent;
    title = 'app';

    hideLogin(){
        this.loginComponent.displayPopover = 'none';
    }

}

我从angular.io 站点中的这个示例中获取了这段代码 问题是，当执行 hideLogin() 函数时，我得到了这个错误：

TypeError: this.loginComponent is undefined
Stack trace:
AppComponent.prototype.hideLogin@webpack-internal:///../../../../../src/app/app.component.ts:21:9
View_AppComponent_0/<@ng:///AppModule/AppComponent.ngfactory.js:10:23
viewDef/handleEvent@webpack-internal:///../../../core/esm5/core.js:13777:115
...

我截断了错误消息，因为我认为整个堆栈跟踪没有任何用处。无论如何，我认为错误可能是 loginComponent 对象未初始化。但对我来说，消息说“未定义”听起来很奇怪，在我从中获取它的示例中，它没有做任何事情来初始化对象，并且它似乎已经分配了组件的单例实例，因为它是访问其属性。

这个问题与@viewChild return undefined问题不同，因为我没有尝试从构造函数访问对象。我正在尝试从通过单击事件执行的函数访问它。这是我的应用程序组件视图：

<div (click)="hideLogin()">
<app-top-bar></app-top-bar>
</div>

我什至尝试从 ngAfterViewInit() 方法访问它，如下所示：

ngAfterViewInit(){
    this.loginComponent.displayPopover = 'none';
}

但我得到了同样的错误

4

0 回答 0