<ng-container> vs <template>

ng-container มีการกล่าวถึงในเอกสารประกอบ Angular 2 แต่ไม่มีคำอธิบายวิธีการทำงานและกรณีการใช้งาน

มันถูกกล่าวถึงโดยเฉพาะในngPluralและngSwitchคำสั่ง

ไม่<ng-container>ทำสิ่งเดียวกันเป็น<template>หรือมันขึ้นอยู่กับว่ามีคำสั่งเป็นลายลักษณ์อักษรที่จะใช้อย่างใดอย่างหนึ่งของพวกเขา?

เป็น

<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>

และ

<template [ngPluralCase]="'=0'">there is nothing</template>

ควรจะเหมือนกันหรือไม่

เราจะเลือกหนึ่งในนั้นได้อย่างไร

สามารถ<ng-container>ใช้ในคำสั่งกำหนดเองได้อย่างไร?

แก้ไข: ตอนนี้มันเป็นเอกสาร

<ng-container> ช่วยเหลือ

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

( ... )

<ng-container> เป็นองค์ประกอบทางไวยากรณ์ที่ยอมรับโดย parser เชิงมุม ไม่ใช่คำสั่งส่วนประกอบคลาสหรือส่วนต่อประสาน มันเหมือนวงเล็บปีกกาในบล็อก if-block ของ JavaScript:

  if (someCondition) {
      statement1; 
      statement2;
      statement3;
     }

หากไม่มีเครื่องหมายปีกกาจาวาสคริปต์จะเรียกใช้คำสั่งแรกเมื่อคุณตั้งใจจะเรียกใช้คำสั่งทั้งหมดแบบมีเงื่อนไขในบล็อกเดียว <ng-container> ตอบสนองความต้องการที่คล้ายกันในแม่แบบเชิงมุม

คำตอบเดิม:

ตามคำขอดึงนี้ :

<ng-container> เป็นคอนเทนเนอร์โลจิคัลที่สามารถใช้เพื่อจัดกลุ่มโหนด แต่ไม่ถูกเรนเดอร์ในต้นไม้ DOM เป็นโหนด

<ng-container> ถูกแสดงผลเป็นความคิดเห็น HTML

ดังนั้นเทมเพลตเชิงมุมนี้:

<div>
    <ng-container>foo</ng-container>
<div>

จะสร้างผลลัพธ์ประเภทนี้:

<div>
    <!--template bindings={}-->foo
<div>

ดังนั้นng-containerจะเป็นประโยชน์เมื่อคุณต้องการที่จะ conditionaly ผนวกกลุ่มขององค์ประกอบ (เช่นใช้*ngIf="foo") ในการประยุกต์ใช้ของคุณ แต่ไม่ต้องการที่จะห่อไว้กับองค์ประกอบอื่น

<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>

จะผลิต:

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>

เอกสารประกอบ ( https://angular.io/guide/template-syntax#!#star-template ) ให้ตัวอย่างต่อไปนี้ สมมติว่าเรามีรหัสเทมเพลตเช่นนี้:

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

ก่อนที่มันจะถูกแสดงผลก็จะเป็น "de-sugared" นั่นคือเครื่องหมายดอกจัน asterix จะถูกคัดลอกไปยังสัญกรณ์:

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

หาก 'currentHero' เป็นความจริงสิ่งนี้จะถูกแสดงผลเป็น

<hero-detail> [...] </hero-detail>

แต่ถ้าคุณต้องการเอาต์พุตแบบมีเงื่อนไขแบบนี้:

<h1>Title</h1><br>
<p>text</p>

.. และคุณไม่ต้องการห่อผลลัพธ์ในภาชนะ

คุณสามารถเขียนเวอร์ชันที่ไม่เหมาะสมได้โดยตรงเช่น:

<template [ngIf]="showContent">
  <h1>Title</h1>
  <p>text</p><br>
</template>

และสิ่งนี้จะทำงานได้ดี อย่างไรก็ตามตอนนี้เราต้องการ ngIf เพื่อให้มีเครื่องหมายวงเล็บ [] แทนเครื่องหมายดอกจัน * และนี่ทำให้เกิดความสับสน ( https://github.com/angular/angular.io/issues/2303 )

ด้วยเหตุนี้จึงมีการสร้างสัญกรณ์ที่แตกต่างกันเช่น:

<ng-container *ngIf="showContent"><br>
  <h1>Title</h1><br>
  <p>text</p><br>
</ng-container>

ทั้งสองเวอร์ชันจะให้ผลลัพธ์ที่เหมือนกัน (เฉพาะ h1 และแท็ก p เท่านั้นที่จะแสดงผล) รายการที่สองเป็นที่ต้องการเนื่องจากคุณสามารถใช้ * ng ถ้าชอบได้ตลอดเวลา

กรณีการใช้งาน Imo ng-containerนั้นเป็นการแทนที่แบบง่ายซึ่งเท็มเพลต/ ส่วนประกอบที่กำหนดเองจะถูก overkill ในเอกสาร API พวกเขากล่าวถึงสิ่งต่อไปนี้

ใช้ ng-container เพื่อจัดกลุ่มหลายโหนดรูต

และฉันเดาว่ามันคือทั้งหมดที่เกี่ยวกับ: การจัดกลุ่มสิ่ง

โปรดทราบว่าng-containerคำสั่งจะหายไปแทนที่จะเป็นแม่แบบที่คำสั่งนั้นล้อมเนื้อหาจริง

กรณีการใช้งานเมื่อคุณต้องการใช้ตารางที่มี * ngIf และ * ngFor - การวาง div ใน td / th จะทำให้องค์ประกอบของตารางทำงานผิดปกติ - ฉันประสบปัญหานี้และนั่นคือคำตอบ