Analisis ringkas unjuran kandungan dalam pembelajaran komponen Angular

Artikel ini akan membawa anda melalui unjuran kandungan dalam komponen Angular. Unjuran kandungan sangat serupa dengan slot dalam Vue dan sangat berguna apabila merangkum komponen Mari kita rasainya bersama

[Cadangan tutorial berkaitan: "tutorial sudut 》]

1 Unjurkan sekeping kandungan

Komponen bekas ditulis seperti ini

<div>
  编号1
  <ng-content></ng-content>
</div>

Komponen perniagaan digunakan seperti ini

<app-page-container>
	未指定投影位置的内容会被投影到无select属性的区域
</app-page-container>

2. Projek beberapa bahagian kandungan/komponen

Komponen bekas ditulis seperti ini

• Gunakan label untuk mengunci kedudukan unjuran

• Gunakan kelas untuk mengunci kedudukan unjuran

• Kunci kedudukan unjuran dengan nama komponen tersuai

• Kunci kedudukan unjuran dengan atribut tersuai

<div>
  编号2
  <ng-content select="h3"></ng-content>
  <ng-content select=".my-class"></ng-content>
  <ng-content select="app-my-hello"></ng-content>
  <ng-content select="[content]"></ng-content>
</div>

Perniagaan Komponen ditunjukkan menggunakan

<app-page-container>
  <h3 id="使用标签锁定投影位置">使用标签锁定投影位置</h3>
  <div class="my-class">使用class锁定投影位置</div>
  <app-my-hello>使用自定义组件名称锁定投影位置</app-my-hello>
  <div content>使用自定义属性锁定投影位置</div>
</app-page-container>

3. Unjuran elemen kanak-kanak

Gunakan

untuk membalut elemen kanak-kanak untuk mengurangkan lapisan dom yang tidak diperlukan, serupa dengan templatng-container

komponen kontena dalam vue ditulis seperti ini

<div>
  编号4
  <ng-content select="question"></ng-content>
</div>

Komponen perniagaan ditulis seperti ini

<app-page-container>
  <ng-container ngProjectAs="question">
    <p>内容投影酷吗?</p>
    <p>内容投影酷吗?</p>
    <p>内容投影酷吗?</p>
    <p>内容投影酷吗?</p>
  </ng-container>
</app-page-container>

4. Unjuran kandungan bersyarat

Penerangan laman web Cina:

• Jika komponen anda perlu_< .
  Dalam kes ini, tidak disyorkan untuk menggunakan elemen ng-kandungan kerana selagi pengguna komponen menyediakan kandungan, walaupun komponen itu tidak pernah mentakrifkan kandungan ng elemen atau ng- Elemen kandungan terletak di dalam pernyataan
ngIf
• , dan kandungan sentiasa dimulakan.
  Menggunakan elemen templat ng, anda boleh meminta komponen anda memaparkan kandungan secara eksplisit berdasarkan mana-mana syarat yang anda mahukan dan memaparkannya beberapa kali. Angular tidak memulakan kandungan elemen templat ng sehingga elemen itu dipaparkan secara eksplisit.

Gunakan

untuk menentukan blok unjuran kami

ng-container

Gunakan arahan

untuk memaparkan
• elemen.

  ngTemplateOutletng-template

  Gunakan arahan dinamik terbina dalam
untuk mengawal sama ada hendak memaparkan unjuran.

• *ngIf

Dalam komponen perniagaan kami menggunakan

<div>
  编号3
  <ng-content select="[button]"></ng-content>
  <p *ngIf="expanded">
    <ng-container [ngTemplateOutlet]="content.templateRef"> </ng-container>
  </p>
</div>

untuk membungkus elemen sebenar kami.

ng-templatekomponen my-hello hanya melakukan output log dalam ngOnInit() untuk memerhati situasi pencetakan.

Kini anda akan dapati halaman tersebut tidak ditayangkan secara normal seperti dahulu, kerana logik kita belum bersekongkol lagi, mari teruskan. Buat arahan dan daftarkannya dalam NgModule Anda mesti mendaftar untuk menggunakannya~

<app-page-container>
  <div button>
    <button appToggle>切换</button>
  </div>
  <ng-template appContent>
    <app-my-hello>有条件的内容投影~</app-my-hello>
  </ng-template>
</app-page-container>

Arahan itu perlu didaftarkan~

Kami Tentukan perintah lain untuk mengawal paparan/menyembunyikan logo dalam komponen Arahan

import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[appContent]',
})
export class ContentDirective {
  constructor(public templateRef: TemplateRef<unknown>) {}
}

perlu didaftarkan~

<🎜. > dalam komponen kontena kami Ia dinyatakan dalam arahan kandungan yang baru ditakrifkan bahawa halaman pada masa ini tidak melaporkan ralat~

@Directive({
  selector: '[appToggle]',
})
export class ToggleDirective {
  @HostListener('click') toggle() {
    this.app.expanded = !this.app.expanded;
  }
  constructor(public app: PageContainerComponent) {}
}

Anda boleh melihat daripada log bahawa apabila kami menukar

logo komponen bekas, hanya terdapat keadaan terbuka

export class PageContainerComponent implements OnInit {

  expanded: boolean = false;

  @ContentChild(ContentDirective)
  content!: ContentDirective;

}

Komponen akan dimulakan Walaupun

berikut tidak dapat melihat kandungan yang diberikan pada halaman, komponen itu sebenarnya telah dimulakan. expandedmy-hellongIf

5 @ContentChild & @ContentChildren

<div *ngIf="false">
  <ng-content *ngIf="false" select="app-my-hello"></ng-content>
</div>

Gunakan kedua-dua penghias ini untuk mengeluarkan bayang Kendalikan komponen.

Gunakan anotasi untuk menentukan komponen yang diunjurkan dalam komponen perniagaan

Selepas cangkuk

dilaksanakan, Dikendalikan oleh komponen unjuran

@ContentChild(HelloWorldComp)
helloComp: HelloWorldComp;

@ContentChildren(HelloWorldComp)
helloComps: QueryList<HelloWorldComp>;

ngAfterContentInit()6 @ViewChild & @ViewChildren

Gunakan dua penghias ini untuk Rujuk subkomponen. untuk mengendalikan

Gunakan anotasi untuk menentukan subkomponen dalam komponen perniagaan

Selepas cangkuk

dilaksanakan, Beroperasi terus pada sub-komponen

@ViewChild(HelloWorldComp)
helloComp: HelloWorldComp;
  
@ViewChildren(HelloWorldComp)
helloComps QueryList<HelloWorldComp>;

ngAfterViewInit()Kesimpulan

Kami baru sahaja menulis di sini tentang penggunaan komponen kemahiran saya adalah terhad, jadi ayuh~

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

Atas ialah kandungan terperinci Analisis ringkas unjuran kandungan dalam pembelajaran komponen Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!