Angular4再トリガサブスクリプションViewChildが再び

Question

レンダリングされた後、私は私のcomponentに次のコードを持っている：私は二度私のボタンをクリックした場合（、

<button type="button" (click)="isFormShown = !isFormShown">CLICK</button> 
<form #form="ngForm" *ngIf="isFormShown"> 
    ... 
</form> 

：

@ViewChild('form') form: NgForm 
isFormShown = true 

    ngAfterViewInit(): void { 
    this.form.valueChanges 
     .subscribe(() => { 
      console.log("form has changed") 
     }) 
    } 

と私のテンプレート内に私のフォームは消えて再び現れます）。私のサブスクリプションがまだ存在するようには見えません。確かに、私は自分のフォームの入力を弄っているし、何も記録されていない。 もう一度やり直すには何が必要ですか？なぜなら*ngIf="isFormShown"である

Answer 1

、

ngIf

が false場合、コンポーネントを削除した場合に再度追加simlpyその true

あなたは使用する必要があります。

[hidden]="!isFormShown" 

をのみを表示するために目的を隠すために常に非表示にする

Answer 2

それはあなたができるよりも、既存の値が代わりにngIfを使用しての単純非表示それを形に残る持ってしても大丈夫です場合：

<button type="button" (click)="isFormShown = !isFormShown">CLICK</button> 
<form #form="ngForm" [hidden]="!isFormShown"> 
... 
</form> 

しかし、あなたはすべての既存の値をクリアしたい場合は、必要により退会と以下のようにフォームのビューの切り替えに再サブスクライブ：

HTML：

<button type="button" (click)="toggleForm()">CLICK</button> 
<form #form="ngForm" *ngIf="isFormShown"> 
... 
</form> 

TS：

@ViewChild('form') form: NgForm; 
public isFormShown: boolean = true; 
private formChangeSubscriber: any; 

ngAfterViewInit(): void { 
    this.formChangeSubscriber = this.form.valueChanges 
    .subscribe(() => { 
     console.log("form has changed") 
    }) 
} 

toggleForm(): void { 
    this.formChangeSubscriber.unsubscribe(); 
    this.isFormShown = !this.isFormShown; 
    if(this.isFormShown) { 
     setTimeout(() => { 
      // wait for a tick so angular can render the changes 
      this.formChangeSubscriber = this.form.valueChanges 
      .subscribe(() => { 
       console.log("form has changed"); 
      }); 
     }, 0); 
    } 
} 

また、上記のコードのplnkr demoを表示することができます。