Perbincangan ringkas tentang arahan templat Sudut: penggunaan templat ng dan bekas ng

Artikel ini akan memberi anda pengenalan ringkas kepada arahan ng-template dan ng-container bagi templat Angular dan memperkenalkan cara menggunakan arahan ng-template dan ng-container.

Pengenalan kepada arahan ng-template

ng-template ialah arahan struktur Sudut yang digunakan untuk menghasilkan HTML. Ia tidak pernah ditunjukkan secara langsung. Malah, Angular menggantikan templat ng dan kandungannya dengan anotasi sebelum memaparkan paparan. [Syor tutorial berkaitan: "tutorial sudut"]

Jika anda tidak menggunakan arahan struktur dan hanya membungkus beberapa elemen lain ke dalam templat ng, elemen tersebut tidak akan kelihatan.

Arahan seperti *ngFor dan *ngIf Angular akan menterjemahkan atribut ini ke dalam elemen secara dalaman dan menggunakannya untuk membungkus elemen hos.

Pengenalan kepada arahan ng-container

Untuk mengelak daripada mencipta div tambahan, kita boleh menggunakan ng-container sebaliknya, yang merupakan elemen kumpulan, tetapi ia tidak mencemarkan gaya Atau susun atur elemen, kerana Angular tidak akan memasukkannya ke dalam DOM sama sekali. ng-container ialah elemen sintaks yang diiktiraf dan diproses oleh penghurai Angular. Ia bukan arahan, komponen, kelas atau antara muka, tetapi lebih seperti pendakap kerinting dalam blok if dalam JavaScript.

penggunaan ng-bekas

Penggunaan 1 (penggunaan paling asas)

Kami di sini Terdapat beberapa pertimbangan yang perlu dibuat semasa menulis dalam gelung senarai Kita tahu bahawa arahan struktur Angular tidak membenarkan dua wujud pada masa yang sama, jika kita tidak mahu menambah div tambahan, kita boleh menggunakan ng -bekas

<ul>
    <ng-container *ngFor="let item of list">
        <li *ngIf="item.context">{{item.context}}</li>
    </ng-container>
</ul>

Penggunaan 2 (digunakan bersama ngSwitch)

<ng-container [ngSwitch]="type">
    <ng-container *ngSwitchCase="&#39;title&#39;">标题</ng-container>
    <ng-container *ngSwitchCase="&#39;text&#39;">内容</ng-container>
    <ng-container *ngSwitchDefault>其他</ng-container>
</ng-container>

Sudah tentu ngSwitch juga boleh ditulis terus pada teg html.

Penggunaan tiga (digunakan bersama-sama dengan ng-template)

boleh digunakan bersama dengan templat untuk mengekstrak kandungan modul pendua, atau untuk pemindahan Menentukan templat untuk dipaparkan. Contohnya, dalam contoh berikut, Parti A mempunyai nama dan pengenalan Parti A, dan Parti B juga mempunyai pengenalan ini, jadi kami boleh menyepadukan pengenalan bersama.

<div>
    <!--甲方-->
    <div>
        <div class="left">甲方：</div>
        <div class="right">
            甲方姓名
            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyA}"></ng-container>
            <!--也可以写成这种方式-->
            <!--
            <ng-container [ngTemplateOutlet]="introduce"
                [ngTemplateOutletContext]="{data: data.partyA}">
            </ng-container>
            [ngTemplateOutlet]也可用在ng-template上
            -->
        </div>
    </div>
    <!--乙方-->
    <div>
        <div class="left">乙方：</div>
        <div class="right">
            乙方姓名
            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyB}"></ng-container>
        </div>
    </div>
    <!--let-data="data"就是上面传进来的值-->
    <ng-template #introduce let-data="data">
        <p>合同介绍......</p>
    </ng-template>
</div>

ngTemplateOutlet ialah rentetan yang mentakrifkan rujukan templat dan objek konteks (iaitu ng-template) templat, jadi jika terdapat berbilang rujukan templat, anda boleh menggunakan kaedah ini ngTemplateOutletContext ialah objek konteks (iaitu ng-template) EmbeddedViewRef yang dilampirkan pada. Ini sepatutnya objek yang kuncinya boleh digunakan untuk pengikatan yang diisytiharkan oleh let templat tempatan. Menggunakan kunci $implicit dalam objek konteks (iaitu ng-template) akan menetapkan nilainya kepada nilai lalai. ngTemplateOutlet juga boleh digunakan untuk templat yang dihantar dari luar

child.component.html

<ng-template [ngTemplateOutlet]="tplRef" [ngTemplateOutletContext]="{data: data}"></ng-template>

child.component.ts

@Input() tplRef: TemplateRef<any>

penggunaan templat ng

Penggunaan 1

Digunakan dalam kombinasi dengan *ngIf, jadi anda tidak perlu menambah Untuk dua syarat penghakiman yang berbeza, anda boleh terus menggunakan pernyataan if else dalam HTML

<div *ngIf="text; else noData">{{text}}</div>
<ng-template #noData>
    <div class="gary">暂无数据</div>
</ng-template>

Penggunaan 2

Gunakan modalService antd dalam halaman Apabila membuat kotak dialog, anda boleh menulis templat dalam HTML, memuatkannya dengan rujukan dan meletakkannya dalam nzContent modal (agak mengelirukan, lihat kod)

<ng-tempalte #content>xxxxxxx</ng-template>

export class AppComponent implements OnInit {
    // 引入模板
     @ViewChild(&#39;content&#39;) contentTpl: TemplateRef<any>;
    ngOnInit() {
        this.modalService.create({
            nzTitle: &#39;标题&#39;,
            nzContent: this.contentTpl
        })
    }
}

Penggunaan 3

Hantarkannya kepada komponen sebagai pembolehubah input dalam bentuk templat, supaya kita boleh menulis apa yang kita mahu apabila menggunakan komponen ini Contohnya, jika kami menulis komponen kongsi yang belum mempunyai data, kami biasanya hanya perlu menghantar teks Dalam beberapa kes khas, kami mungkin perlu menambah beberapa butang baharu.

kosong.komponen.html

<div>
    <img src=""/>
    <div>
        <ng-container [ngSwitch]="true">
            <ng-container *ngSwitchCase="isTemplate(text)"
                [ngTemplateOutlet]="text"
            ></ng-container>
        </ng-container>
        {{text || &#39;&#39;}}
    </div>
</div>

kosong.komponen.ts

export class EmptyComponent {
    @Input() text: TemplateRef<any>
  isTemplate(text: any) {
      return text instanceof TemplateRef;
  }
}

Ringkasnya, ia semua Beberapa penggunaan paling asas Ini adalah yang saya tahu sekarang Jika anda tahu lebih lanjut, anda dialu-alukan untuk menambah.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang arahan templat Sudut: penggunaan templat ng dan bekas ng. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!