* ngIf = "isProductSearchEmpty"または[style.display] = "displayProduct"はいつ使用しますか？

Question

何度か私はいつ*ngIf="isProductSearchEmpty"または[style.display]="displayProduct"を使用するか分かりません。

<div *ngIf="isProductSearchEmpty"> 
    <div class="not-found searchStr"> 
    "{{searchStr}}" not found.. 
    </div> 
    <rb-categories></rb-categories> 
</div> 

私が使用するオプションを持っている：製品-list.component.tsで

<div [style.display]="displayProduct"> 
    <div class="not-found searchStr"> 
    "{{searchStr}}" not found.. 
    </div> 
    <rb-categories></rb-categories> 
</div> 

、isProductSearchEmptyが真か偽のどちらかであるとdisplayProductがどれかのブロックのいずれかではありません。

Answer 1

* ngIf：

条件付きでは、式の値に基づいてテンプレートが含まれています。

DOMに要素を追加して削除します。だからあなたが* ngIfで使うときは、あなたのテンプレートレンダリングが他の要素のために変わるかもしれないと考えるべきです。 さらに、*ngIfを使用して、 'ngIf - else else'構文でテンプレート全体を表示することができます。これはマークアップの「大きな」ブロックに適用される場合、またはelse if条件が続く場合に使用されます。

[style.display]は、CSSプロパティ 'display'の変更をトリガします。要素の表示プロパティを変更する方が多くあります。多くの場合、[hidden]

は逆の論理を取り、DOMから要素を削除しません*ngIfの代わりに使用されています。

Answer 2

ほとんどの場合、子ホストのビュー（コンポーネント）と埋め込みビューをコンポーネントビューで正しく処理（追加または削除）するため、ngIfを使用することをお勧めします。 ViewChildとViewChildrenここngOnDestroy

をトリガー

に照会を更新

• は一例である：それは意味

  @Component({ 
      selector: 'my-app', 
      queries: [], 
      template: ` 
       <h2>Hello {{name}}</h2> 
       <div *ngIf="false"> 
        <a-comp></a-comp> 
       </div> 
      ` 
  }) 
  export class AppComponent { 
      name = `Angular! v${VERSION.full}`; 
      @ViewChildren(AComponent) children; 
  
      ngAfterViewInit() { 
       console.log(this.children.length); // 0 
      } 
  } 
  

  display.noneは単にDOMノードをレンダラていないのに対し、しかし、子要素はまだ処理されています。

  template: ` 
      <h2>Hello {{name}}</h2> 
      <div [style.display]="'none'"> 
       <a-comp></a-comp> 
      </div> 
  `, 
  

  と長さは今1です：

  ngAfterViewInit() { 
      console.log(this.children.length); // 1 
  } 
  

  それが隠されていますし、それが今ではまだ存在だと思ったときにngOnDestroyもa-compためにトリガーされません。

  [style.display]="'none'"は、それが使用されている要素に子コンポーネントが含まれていない場合や、ViewContainerRefを使用して作成された埋め込みビューの場合に安全に使用できます。