同じHTMLファイルに次のコンポーネントがあります。
<app-form></app-form>
<app-results [hidden]="isOn"></app-results>
<app-contact-primary [hidden]="!isOn"></<app-contact-primary>
<app-contact-second [hidden]="!isOn"></app-contact-second>
コンポーネント「app-form」には、2つのボタンがあります。
<button pButton label="Contact" (click)="">Contact</button>
<button pButton label="Results" (click)="">Results</button>
「Contact」ボタンをクリックすると、コンポーネント「app-contact-primary」と「app-contact-second」が表示され、「app-results」コンポーネントが非表示になります。
しかし、「結果」ボタンをクリックすると、コンポーネント「app-contact-primary」と「app-contact-second」を非表示にし、「app-results」コンポーネントを表示する必要があります。
どうすればできますか?
ありがとう
hiddenまたはngIfを使用できます:
<app-form></app-form>
<app-results *ngIf="isOn"></app-results>
<app-contact-primary *ngIf="!isOn"></<app-contact-primary>
<app-contact-second *ngIf="!isOn"></app-contact-second>
<button pButton label="Contact" (click)="isOn= false">Contact</button>
<button pButton label="Results" (click)="isOn= true">Results</button>
使用するだけ
public show: boolean = false;
public buttonName: any = true;
toggle() {
this.show = !this.show;
if(this.show)
this.buttonName = false;
else
this.buttonName = true;
}
<div *ngIf="show">
<textarea #todoitem class="></textarea>
</div>
<button type="button" (click)="addItem('status')">Add</button>
<button type="button" (click)="toggle()">Close</button>
<div *ngIf="buttonName">
<a (click)="toggle()"><i class="fa fa-plus text-white"></i></a>
</div>
変数をtrueとfalseにするだけです
<button pButton label="Contact" (click)="isOn = true">Contact</button>
<button pButton label="Results" (click)="isOn = false">Results</button>