typescript - Angular: Visa/Dölj komponent beroende på annan komponents tillstånd

Jag har en checkbox och en textbox på en webbsida. Checkbox och Textbox är två oberoende komponenter.

Textrutan ska vara dold tills kryssrutan är på. Om kryssrutan är av - ska textrutan vara dold

Är det möjligt via direktiv? Något i stil med:

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

Tack på förhand!

Svar #1

Du missade precis att identifiera elementet som du hänvisar till och använda dess egenskap.

en av de följande två koderna bör fungera för dig:

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



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

Denna länk kan vara användbar för dig: element-refs-in-angular-templates

Svar #2

Du kan använda EventEmitter och Input, Output i Angular för komponentrelationer.

som detta:

checkbox-komponent.html :

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

checkbox-komponent.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;
}

textbox-komponent.ts :

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

textbox-komponent.html :

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

Föräldrakomponenten är din webbsida som innehåller dina oberoende komponenter.