angular - Angular：根据其他组件状态显示/隐藏组件

Question

我有一个checkbox和textbox在一个网页上。Checkbox并且Textbox是两个独立的组件。

文本框应该隐藏，直到复选框打开。如果复选框关闭 - 文本框应该被隐藏

是否可以通过指令？就像是：

<checkbox></checkbox>
<textbox *ngIf="checkbox.value"></textbox>

先感谢您！

标签： angulartypescript

Answer 1

您只是错过了识别您所引用的元素并使用其属性。

以下两个代码之一应该适合您：

<checkbox ngModel #myCheckbox></checkbox>
<textbox *ngIf="myCheckbox.value"></textbox>



<checkbox ngModel id="myCheckbox"></checkbox>
<textbox *ngIf="myCheckbox.value"></textbox>

此链接可能对您有用： element-refs-in-angular-templates