Question

我正在使用ngx-popover，当尝试从另一个组件打开它时，它显示以下错误无法阅读财产＆＃39;显示＆＃39;未定义的以下是以下代码。 home.html是父组件在

home.html的

<button (click)="onShowPopOver()">Device</span>
<device-popover *ngIf="showPopover"></device-popover>

home.component.ts

onShowPopOver() {
  this.showPopover=true;
}

我的devicePopover组件如下所示

@ViewChild('myPopover')  popover: Popover;

 constructor() {
      this.popover.show();
  }

我的devicePopover.html如下所示：

     <popover-content #myPopover class="myPopover"
                 title="Add/remove an Emulator"
                 placement="bottom"
                 [animation]="true"
                 [closeOnClickOutside]="true" >
 <span>Hello</span>
</popover-content>

device-popover是devicePopover组件的选择器。当我尝试调用子组件时，它正在触及构造函数，但抛出错误为＆＃34;显示未定义＆＃34;

Answer 1

@ViewChild引用子视图，并且在您的组件实例化时尚未创建此视图。您需要依赖生命周期钩子才能访问此popover属性：

根据docs：

ngAfterViewInit()在Angular初始化组件后做出响应   观点和儿童观点。

在第一次ngAfterContentChecked（）之后调用一次。

仅限组件的挂钩。

@ViewChild()将在调用ngAfterViewInit之前填充。

如果要将字符串用作@ViewChild()的参数，还需要在元素上放置模板引用：

@ViewChild("myPopover")

<div popover #myPopover=popover *ngIf="showPopover"></div>

否则你应该使用一个类作为参数：

@ViewChild(Popover) //the popover from ngx-popover, not yours

<div popover *ngIf="showPopover"></div>

所以这应该有效：

@ViewChild("myPopover")  popover: Popover;

ngAfterViewInit() {
  this.popover.show();
}

<div popover #myPopover=popover *ngIf="showPopover"></div>

ngx-popover无法阅读＆＃39;显示＆＃39;未定义的

1 个答案: