Question

这是我试图访问子组件中的变量的组件。父是app组件，子名称为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 site中的此示例中获取了此代码问题是当执行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对象未初始化。但对我而言，这个消息说＆＃34;没有定义＆＃34;这听起来很奇怪。在我从中获取的示例中，它没有做任何事情来初始化对象，并且它似乎已经分配了组件单例的实例，因为它访问了它的属性。

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

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

我甚至试过从ngAfterViewInit（）方法中访问它，如下所示：

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

但我得到了同样的错误

为什么没有使用@ViewChild以角度定义属性

0 个答案: