Angular6-参考隐藏元素

Question

我有一种情况，我正在使用嵌入在html模板中的组件，并且希望将其隐藏直到选中一个框。但是，有一个条件可以确定是否将“ showControl”设置为true。 条件是通过在控件上调用方法确定的（这里是鸡和蛋的情况）。

html如下：

<input type="checkbox" (click)="clickBox()" />

<div *ngIf="showControl">
    <app-sample #appsampleref></app-sample>
</div>

.ts代码如下：

@ViewChild(appsampleref) appSampleControl: AppSampleComponent;

clickBox() {
   if (this.appSampleControl.someMethod()) { 
       this.showControl = true;
   }
}

上面的代码给我以下错误：

  

错误TypeError：无法获取未定义的属性'someMethod'或   空引用

我该如何解决这种情况，因为Angular在显示它之前显然不会初始化我的控件。

在此先感谢任何提示！ ：）

Answer 1

您需要将元素保留在dom中，只需切换其可见性即可！使用*ngIf代替[hidden]。 *ngIf实际上将在dom中添加或删除元素，而[hidden]将仅在元素上切换显示属性。请注意，如果*ngIf如果元素为真，将显示，而[hidden]如果元素为真，则将隐藏。

因此，在您的代码中，使用[hidden]="!showControl"而不是*ngIf语句。但是，我将更改打字稿代码和变量名称，以便您不必在HTML模板中将其取反。