Անգուլարում պայմանների ռեակտիվություն
Ռեակտիվությունը նաև կաշխատի
ngIf պայմանների հետ:
Սա նշանակում է, որ մենք կարող ենք
ցույց տալ կամ թաքցնել բլոկը՝ կախված
նրանից, թե ինչ է պարունակվում դասի հատկության մեջ:
Եկեք փորձենք գործնականում: Ենթադրենք, որ մենք ունենք հետևյալ բլոկը
<div>
տեքստ
</div>
Եկեք այն ցույց տանք կամ թաքցնենք ըստ պայմանի:
<div *ngIf="isShow">
տեքստ
</div>
Հիմա ստեղծենք երկու կոճակ: Մեկի վրա կտտացնելիս կցույց տանք մեր բլոկը, իսկ մյուսի վրա կտտացնելիս՝ կթաքցնենք.
<button (click)="show()">
ցույց տալ
</button>
<button (click)="hide()">
թաքցնել
</button>
Ավելացնենք կոմպոնենտի դասում այն հատկությունը, որը կկարգավորի, արդյոք բլոկը տեսանելի է, թե ոչ.
export class AppComponent {
public isShow: boolean = true;
}
Հիմա գրենք մեր մեթոդների իրականացումը բլոկը ցույց տալու և թաքցնելու համար.
export class AppComponent {
public isShow: boolean = true;
public show(): void {
this.isShow = true;
}
public hide(): void {
this.isShow = false;
}
}
Ստեղծեք կոճակ, որի վրա կտտացնելը կփոխի բլոկի տեսանելիությունը՝ ցույց կտա, եթե այն թաքնված է, և կթաքցնի, եթե այն ցուցադրված է:
