ngIfによって隠されたコンポーネントの参照を保持する

Question

ngForでいくつかの子コンポーネントを生成する質問divがあります。 これらの子コンポーネントには、データの入力フィールドがあります。ユーザーがこれらのフィールドにデータを入力して次のボタンをクリックすると、ngIfでdivが非表示になり、プレビューdivが表示されます。もう一度戻るボタンを押すと、プレビューdivはngIfで非表示になり、質問divが表示されます。質問divの子コンポーネントが再度作成され、入力フィールドのデータがなくなるためです。以下は、私のhtml

そのデータはバックボタンが押された後のdivが再度表示される質問の後に失われないように、私はそれらのコンポーネントの以前の状態を維持するにはどうすればよい

<!-- questions 

    div--> 
    <div class="questions activity_screen" *ngIf="showquestions"> 
       <div *ngFor="let component of components;let i=index"> 
        <app-termhost #cmp [term] = component [title]="component.title" [Qnumber]="i+1"></app-termhost> 
       </div> 
       <a class="submit_button" (click)="getdata()">Submit</a> 
      </div> 
     <!-- preview div--> 
      <div style="width: 100%;height: 100%;display: flex;align-content: center;justify-content: center" class="preivew" *ngIf="showpdf"> 
       <button (click)="goback()">go back</button> 
      </div> 

です！

Answer 1

試し代わりに* ngIfの隠されたプロパティを使用するには、隠されたCSSでのみ再生されますが、* ngIfはcompletly要素を削除します：

[hidden]="condition"