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;
   }
}

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

ERROR TypeError: Unable to get property 'someMethod' of undefined or null reference

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

提前感谢您的指点！ :)

Answer 1

您需要将元素保留在 dom 中，只需切换它的可见性即可！使用 [hidden] 而不是 *ngIf。 *ngIf 实际上会在 dom 中添加或删除元素，而 [hidden] 只会切换元素上的显示 属性。请注意，*ngIf 将 显示 元素（如果计算结果为真），而 [hidden] 将 隐藏 元素（如果计算结果为真）为真。

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