ng2 - ความแตกต่างระหว่างแท็ก ng-container และ ng-template

ใครช่วยอธิบายความแตกต่างระหว่างการใช้<ng-container>และ<ng-template>องค์ประกอบได้ไหม

ฉันไม่พบเอกสารสำหรับNgContainerและไม่เข้าใจความแตกต่างระหว่างแท็กเทมเพลต

ตัวอย่างโค้ดของแต่ละรหัสจะช่วยได้มาก

ทั้งสองอยู่ในขณะนี้ (2.x, 4.x) ใช้ในการจัดกลุ่มองค์ประกอบเข้าด้วยกันโดยไม่ต้องแนะนำองค์ประกอบอื่นซึ่งจะแสดงบนหน้าเว็บ (เช่นdivหรือspan)

templateอย่างไรก็ตามต้องการไวยากรณ์ที่น่ารังเกียจ ตัวอย่างเช่น,

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>

จะกลายเป็น

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

คุณสามารถใช้ng-containerแทนได้เนื่องจากเป็นไปตาม*ไวยากรณ์ที่ดีซึ่งคุณคาดหวังและอาจคุ้นเคยอยู่แล้ว

<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <li>...</li>
</ng-container>

คุณสามารถค้นหารายละเอียดเพิ่มเติมโดยการอ่านการสนทนานี้บน GitHub

โปรดทราบว่าใน 4.x <template>เลิกใช้งานแล้วและเปลี่ยนเป็น<ng-template>.

ใช้

• <ng-container>หากคุณต้องการองค์ประกอบตัวช่วยสำหรับคำสั่งโครงสร้างที่ซ้อนกันเช่น*ngIfหรือ*ngForหรือหากคุณต้องการรวมองค์ประกอบมากกว่าหนึ่งองค์ประกอบไว้ในคำสั่งโครงสร้างดังกล่าว
• <ng-template>หากคุณต้องการดู "ตัวอย่าง" ที่คุณต้องการที่จะประทับในสถานที่ต่าง ๆ โดยใช้ngForTemplate, หรือngTemplateOutletcreateEmbeddedView()

ng-templateจะใช้สำหรับการสั่งโครงสร้างเช่นng-if, และng-for ng-switchหากคุณใช้โดยไม่มีคำสั่งโครงสร้างจะไม่มีอะไรเกิดขึ้นและจะแสดงผล

ng-containerใช้เมื่อคุณไม่มีกระดาษห่อหุ้มที่เหมาะสมหรือคอนเทนเนอร์หลัก ในกรณีส่วนใหญ่เรากำลังใช้divหรือspanเป็นคอนเทนเนอร์ แต่ในกรณีเช่นนี้เมื่อเราต้องการใช้คำสั่งเชิงโครงสร้างหลาย ๆ แต่เราไม่สามารถใช้คำสั่งโครงสร้างมากกว่าหนึ่งคำสั่งกับองค์ประกอบในกรณีนั้นng-containerสามารถใช้เป็นคอนเทนเนอร์ได้

NG-แม่แบบเป็นองค์ประกอบเชิงมุมสำหรับการแสดงผล HTML ไม่เคยแสดงโดยตรง ใช้สำหรับคำสั่งโครงสร้างเช่น ngIf, ngFor, ngSwitch, .. ตัวอย่าง :
<ng-template>

<div *ngIf="hero" class="name">{{hero.name}}</div>

Angular แปลแอตทริบิวต์ * ngIf เป็น<ng-template>องค์ประกอบโดยล้อมรอบองค์ประกอบโฮสต์เช่นนี้

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

ng-container
ใช้เป็นองค์ประกอบการจัดกลุ่มเมื่อไม่มีองค์ประกอบโฮสต์ที่เหมาะสม
ตัวอย่าง:

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <span *ngFor="let h of heroes">
    <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </span>
  </span>
</select>

สิ่งนี้จะไม่ทำงาน เนื่องจากองค์ประกอบ HTML บางส่วนกำหนดให้เด็กในทันทีทั้งหมดเป็นประเภทเฉพาะ ตัวอย่างเช่น<select>องค์ประกอบต้องการเด็ก คุณไม่สามารถรวมตัวเลือกตามเงื่อนไขหรือไฟล์<span>.

ลองสิ่งนี้:

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>

วิธีนี้จะได้ผล

ข้อมูลเพิ่มเติม: Angular Structural Directive

ng-template แสดงมูลค่าที่แท้จริง

<ng-template>
    This is template block
</ng-template>

เอาท์พุต:

ng-container แสดงโดยไม่มีเงื่อนไขก็แสดงเนื้อหาเช่นกัน

<ng-container>
    This is container.
</ng-container>

เอาท์พุท:
นี่คือคอนเทนเนอร์

ng-templateเป็นชื่อที่แสดงถึงหมายถึงแม่แบบ โดยตัวมันเองไม่ได้แสดงผลอะไรเลย เราสามารถใช้ng-containerเพื่อให้ตัวยึดที่จะทำให้แม่แบบไดนามิก

การใช้งานอีกกรณีหนึ่งng-templateคือเราสามารถใช้มันเพื่อซ้อนคำสั่งโครงสร้างหลายรายการเข้าด้วยกัน คุณสามารถดูตัวอย่างดีๆได้ที่นี่ในบล็อกโพสต์นี้: angular ng-template / ng-container

พูดง่ายๆng-containerก็คือเหมือนองค์ประกอบที่สูงขึ้นของReactซึ่งช่วยในการแสดงผลองค์ประกอบลูกเท่านั้น

ng-templateเป็นพื้นฐานสำหรับการใช้งานAngularภายในโดยที่สิ่งใดก็ตามที่อยู่ในng-templateนั้นจะถูกละเว้นโดยสิ้นเชิงในขณะที่แสดงผลและโดยทั่วไปแล้วมันจะกลายเป็นความคิดเห็นในมุมมองแหล่งที่มา นี้ควรจะนำมาใช้กับคำสั่งภายในเชิงมุมเหมือนngIf, ngSwitchฯลฯ

ฉันชอบ<ng-container>วิธีแยก "ตรรกะ" จาก "มาร์กอัป" ให้ได้มากที่สุดในไฟล์ Angular .component.html

(บางส่วน) ตัวอย่างในการแสดงแถวของตาราง html:

        <ng-container *ngFor="let product of products">
          <tr>
            <td></td>
            <td>{{ product.productName }}</td>
            <td>{{ product.productCode }}</td>
            <td>{{ product.releaseDate }}</td>
            <td>{{ product.price }}</td>
            <td>{{ product.starRating }}</td>
          </tr>
        </ng-container>

ด้วยวิธีนี้หากฉันต้องการเปลี่ยนจาก HTML <table>เป็นอย่างอื่นเช่นกลุ่มที่<div>มีสไตล์เฟล็กบ็อกซ์ฉันไม่จำเป็นต้อง "แกะสลัก" ตรรกะการวนซ้ำออก (หรือเสี่ยงที่จะสูญเสียมันอย่างสมบูรณ์) จากภายในไฟล์<tr>. นอกจากนี้ยังป้องกันไม่ให้ตรรกะการวนซ้ำ (ngFor) ถูกบดบังบางส่วนโดย html ปกติ