Mari kita bincangkan tentang pemahaman dan penggunaan arahan NgTemplateOutlet dalam Angular

Artikel ini akan membawa anda melalui arahan NgTemplateOutlet dalam Angular dan memperkenalkan pemahaman dan aplikasi arahan struktur NgTemplateOutlet saya harap ia akan membantu anda!

Baru-baru ini saya melihat arahan struktur NgTemplateOutlet ini semasa saya menonton program latihan, tetapi saya tidak pernah didedahkan sebelum ini dan saya tidak tahu cara menggunakannya itu. , kemudian, saya pergi ke laman web rasmi untuk mencari API ini (Pautan laman web rasmi klik di sini).

Tetapi saya tidak faham perihalan API Saya tidak tahu apa yang dipanggil objek konteks dan saya tidak tahu apakah pembolehubah biarkan. Kemudian selepas seharian menyelak dokumen dan mencatat nota, saya akhirnya dapat mengetahui apakah ini Rakan-rakan yang tidak mengetahuinya boleh merujuk artikel terakhir saya: [Pembelajaran Sudut] Mengenai pembolehubah input templat (biar-. pembolehubah) pemahaman

Artikel ini hanya bercakap tentang senario penggunaan dan penggunaan NgTemplateOutlet. [Cadangan tutorial berkaitan: "tutorial sudut"]

Cara menggunakan

Menurut laman web rasmi, API ini adalah seperti ini:

Sisipkan paparan sebaris berdasarkan TemplateRef yang disediakan.

Saya akan menterjemahkannya : jadikan elemen hos NgTemplateOutlet menjadi paparan sebaris - paparan sebaris ini berdasarkan templateRef yang telah ditentukan sebelumnya Dijana oleh rujukan templat . Tidak kira apa elemen elemen hos, ia tidak akan dipaparkan.

Mari kita ubah contoh di laman web rasmi (kerana saya tidak dapat memahami kehidupan laman web rasmi):

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <ng-container *ngTemplateOutlet="one"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="two; context: myContext"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="three; context: myContext"></ng-container>
    <hr>

    <ng-template #one><span>Hello</span></ng-template>
    <ng-template #two let-name><span>Hello {{name}}!</span></ng-template>
    <ng-template #three let-person="lastName">My name is <span>LeBron {{person}}!</span></ng-template>
`
})
export class NgTemplateOutletExample {
  myContext = {$implicit: &#39;World&#39;, lastName: &#39;James&#39;};
}

Elemen hos boleh menggunakan arahan struktur ngTemplateOutlet untuk jadikan dirinya menjadi Paparan sebaris yang dijana oleh mana-mana templat <ng-template></ng-template>. Dan anda boleh menetapkan objek konteks kepadanya. Kemudian kita boleh menggunakan let-变量 pembolehubah input templat dalam templat ini untuk mendapatkan nilai dalam objek konteks Templat ini lebih fleksibel.

Senario aplikasi

Serupa dengan ng-zorro komponen halaman rangka kerja iniPagination (Pautan laman web rasmi ). Jika kami tidak berpuas hati dengan gaya atau struktur halaman lalai sebelumnya dan halaman seterusnya dan ingin melaraskannya sendiri, kami boleh menyediakan atribut input (atribut yang ditakrifkan oleh @Input) untuk menerima templat dan menyediakannya dengan Properties yang diperlukan atau kaedah. Dalam kes ini, kita boleh menggunakan semula komponen tanpa mengubah suai kod sumber komponen.

Demo

Kami mula-mula mentakrifkan sub-komponen HeroDisplayCard, antara muka paparan watak

@Component({
  selector:'app-hero-display-card',
  template:`
    <h2 [style]="{textAlign:&#39;center&#39;}">角色列表</h2>
    <ul class="hero-card-box">
      <li class="hero-card-item" *ngFor="let h of heroesList">
        <p [style]="{textAlign:&#39;center&#39;}">
          角色id：{{h.id}}--
          角色名字：{{h.name}}--
          角色属性：{{h.features}}
        </p>
      </li>
    </ul>
  `,
  styles:[
    `.hero-card-box{
      width: 600px;
      margin: 10px auto;
    }
    .hero-card-item{
      list-style: none;
    }
    `
  ]
})
export class HeroDisplayCard {
  public heroesList = [
    {id:&#39;013&#39;,name:&#39;钟离&#39;,features:&#39;rock&#39;},
    {id:&#39;061&#39;,name:&#39;烟绯&#39;,features:&#39;fire&#39;},
    {id:&#39;022&#39;,name:&#39;迪奥娜&#39;,features:&#39;ice&#39;},
    {id:&#39;004&#39;,name:&#39;诺艾尔&#39;,features:&#39;rock&#39;},
  ]
}

dan kemudian memperkenalkan komponen ini ke dalam komponen induk Antaranya:

@Component({
  selector:'app-templateoutlet-app-demo',
  template:`
    <app-hero-display-card></app-hero-display-card>
  `
})
export class TemplateOutletAppDemoComponent {}

Jalankan kod dan kesannya adalah seperti yang ditunjukkan di bawah:

Saya rasa gaya ini li ialah benar-benar hodoh, dan susunannya Tidak betul juga. Saya mahu meletakkan atribut watak sebelum nama watak. Dalam kes ini, sangat menyusahkan untuk menukar gaya dengan memasukkan atribut Kita mungkin perlu menentukan banyak pembolehubah untuk dipilih oleh pengguna, yang agak melebihi keuntungan. Jadi mengapa tidak kami menyediakan templat terus kepada pengguna, kami hanya perlu menyediakan data yang diperlukan. Kebebasan gaya dan susun atur diserahkan kepada pengguna.

Kemudian untuk sub-komponen HeroDisplayCard kita boleh menukarnya seperti ini:

@Component({
  selector:'app-hero-display-card',
  template:`
    <h2 [style]="{textAlign:&#39;center&#39;}">角色列表</h2>
    <ul class="hero-card-box">
      <ng-container *ngFor="let h of heroesList">
        <!-- 如果没有传入cardItemTemplate则显示默认 -->
        <li class="hero-card-item" *ngIf="!cardItemTemplate">
          <p [style]="{textAlign:&#39;center&#39;}">
            角色id：{{h.id}}--
            角色名字：{{h.name}}--
            角色属性：{{h.features}}
          </p>
        </li>
        <!-- 如果传入了自定义模板，则显示出来，鉴于angular的结构型指令不能在同一个宿主元素上的规定，于是这样写 -->
        <ng-container *ngIf="cardItemTemplate">
		  <!-- 将自定义模板的上下文对象设置为h -->
          <ng-container *ngTemplateOutlet="cardItemTemplate;context:h"></ng-container>
        </ng-container>
      </ng-container>
    </ul>
  `,
  styles:[ //省略 ]
})
export class HeroDisplayCard {
  @Input() cardItemTemplate:TemplateRef<any>;
  public heroesList = [ // 省略]
}

Kemudian kita lulus templat tersuai ke dalam komponen induk:

@Component({
  selector:'app-templateoutlet-app-demo',
  template:`
    <app-hero-display-card [cardItemTemplate]="myCardTemplate"></app-hero-display-card>
	<!-- 将模板引用变量myCardTemplate传入子组件 -->
    <ng-template #myCardTemplate let-id="id" let-name="name" let-features="features">
      <li class="hero-card-custom-item">
        <p>角色id：<span>{{id}}</span></p>
        <p>角色属性：<span>{{features}}</span></p>
        <p>角色名字：<span>{{name}}</span></p>
      </li>
    </ng-template>
  `,
  styles:[
    //在这里写自定义模板的样式  
    `.hero-card-custom-item{
      width: 100%;
      height: 35px;
      border: 1px solid #999999;
      border-radius: 5px;
      display: flex;
      justify-content:space-around;
      align-items: center;
      margin: 10px 0;
    }
    .hero-card-custom-item p {
      width: 30%;
      margin: 0;
      font-size: 20px;
      color: #666666;
    }
    .hero-card-custom-item p span {
      color: red;
    }`
  ]
})
export class TemplateOutletAppDemoComponent {}

Kemudian jalankan, kesannya adalah seperti yang ditunjukkan di bawah (sebenarnya ia masih sangat hodoh):

Ringkasan

Gunakan NgTemplateOutlet Arahan struktur ini boleh meningkatkan enkapsulasi sub-komponen kami dan mengelakkan keperluan untuk mentakrifkan sejumlah besar sifat input, menyebabkan templat komponen induk kelihatan kembung.

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

Atas ialah kandungan terperinci Mari kita bincangkan tentang pemahaman dan penggunaan arahan NgTemplateOutlet dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!