Блог

У меня есть checkbox и textbox на веб-странице. Checkbox и Textbox являются двумя независимыми компонентами.

Текстовое поле должно быть скрыто до момента включения флажка. Если флажок выключен — текстовое поле должно быть скрыто

Возможно ли это с помощью директив? Что-то вроде:

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

Заранее спасибо!

Вы просто пропустили определение элемента, на который ссылаетесь, и использование его свойства.

один из следующих двух кодов должен работать для вас:

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



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

Эта ссылка может быть вам полезна :
element-refs-in-angular-templates

Вы можете использовать EventEmitter и Input Output в angular для отношений компонентов.

вот так:

checkbox-component.html

 <checkbox (change)="changeEvent()"></checkbox>
 

флажок-component.ts

 @Output checkboxChange: Eventemitter<boolean> = new Eventemitter<boolean>();

changeEvent(){
   // if checbox checked value is true else false
   this.checkboxChange.emit(value);
}
 

parent-component.html

 <textbox-component [ShowValue]="checkBoxValue"></textbox-component>
<checkbox-component (checkboxChange)="onCheckboxChange($event)"></checkbox-component>
 

parent-component.ts

 onCheckboxChange(value){
 this.checkBoxValue = value;
}
 

текстовое поле-component.ts

   @Input() public set ShowValue(value: boolean) 
  {
    this.show = value;
  }
 

textbox-component.html

 <textbox *ngIf="show"></textbox>
 

родительский компонент — это ваша веб-страница, которая содержит ваши независимые компоненты.