Mari kita bincangkan tentang kaedah unjuran kandungan dalam sudut

Artikel ini akan membincangkan tentang unjuran kandungan dalam sudut, memperkenalkan kaedah penggunaan ng-kandungan untuk unjuran kandungan, dan memahami kaedah pelaksanaan unjuran kandungan bersyarat. Saya harap ia akan membantu semua orang. !

1 ng-content Kandungan projek

1.1 ng-content<span style="font-size: 16px;">ng-content</span>

ng-content elemen ialah 占位符 yang digunakan untuk memasukkan kandungan luaran atau dinamik. Komponen induk menghantar 外部内容 kepada komponen anak, dan apabila Angular menghuraikan templat, kandungan luaran dimasukkan ke dalam templat komponen anak di mana ng-content muncul. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

Kami boleh menggunakan unjuran kandungan untuk mencipta komponen boleh guna semula. Komponen ini mempunyai logik dan susun atur yang sama dan boleh digunakan di banyak tempat. Umumnya kami sering menggunakannya apabila 封装 beberapa komponen awam.

1.2 Mengapa menggunakan unjuran kandungan

Tentukan komponen butang:

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    <span class="icon-search"></span>
`
})
export class AppButtonComponent {}

Tujuan komponen butang ini adalah untuk menambah ikon carian di dalam butang Kami sebenarnya menggunakannya seperti berikut:

<button appButton>click</button>

Kami mendapati bahawa komponen hanya akan memaparkan ikon carian, tetapi teks daripada. butang tidak akan dipaparkan. Bolehkah anda Penghias @Input yang paling biasa digunakan terlintas di fikiran, tetapi bagaimana jika kita bukan hanya mahu menyampaikan dalam teks, tetapi satu perenggan html? Di sinilah ng-content akan digunakan.

1.3 Unjuran kandungan slot tunggal

Bentuk unjuran kandungan yang paling asas ialah 单插槽内容投影.

Unjuran kandungan slot tunggal bermaksud mencipta komponen di mana kita boleh menayangkan komponen.

Ambil komponen butang sebagai contoh untuk mencipta unjuran kandungan slot tunggal:

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    <span class="icon-search"></span> <ng-content></ng-content>
`
})
export class AppButtonComponent {}

Penggunaan sebenar adalah seperti berikut:

<button appButton>click</button>

Anda boleh mendapati bahawa kesan komponen butang ini adalah untuk memaparkan kedua-dua ikon carian dan teks butang (klik). Iaitu, kandungan di tengah 2b4ad80bee79097601321f1e5d22b32765281c5ac262bf6d81768915a4a77ac0 投影 dialihkan ke kedudukan d553bd28b5bbbbd4b6fb4990edbabbf078e68693bbc3a4be56286441c90e88e6 komponen. Elemen

ng-content ialah pemegang tempat, ia tidak mencipta elemen DOM sebenar. Sifat tersuai kandungan ng tersebut akan diabaikan.

1.4 Unjuran Kandungan Berbilang Slot

Sesuatu komponen boleh mempunyai 多个插槽 dan setiap slot boleh menentukan satu CSS 选择器, pemilih menentukan apa yang masuk ke dalam slot itu. Corak ini dipanggil 多插槽内容投影. Menggunakan mod ini kita mesti menentukan perkara yang ingin kita tayangkan 出现在的位置. Ini boleh dicapai dengan menggunakan atribut ng-content select.

• templat komponen mengandungi tag 多个 ng-content.
• Untuk membezakan kandungan yang diunjurkan yang boleh ditayangkan kepada ng-content 标签 yang sepadan, anda perlu menggunakan atribut ng-content pada teg select sebagai pengenalan. Atribut
• select menyokong sebarang gabungan 标签名, 属性, CSS 类 dan :not 伪类.
• Teg select tanpa menambah atribut ng-content akan bertindak sebagai 默认插槽. Semua kandungan unjuran yang tidak dapat dipadankan akan ditayangkan di lokasi ng-content ini.

Ambil komponen butang sebagai contoh untuk mencipta unjuran kandungan berbilang slot:

button-component.ts

@Component({
    selector: '[appButton]',
    template: `
    <span class="icon-search"></span> <ng-content select="[shuxing]"></ng-content> <ng-content select="p"></ng-content> <ng-content select=".lei"></ng-content>
`
})
export class AppButtonComponent {}

Penggunaan sebenar adalah seperti berikut:

<button appButton>
<p>click</p> <span shuxing>me</span> <span class="lei">here</span>
</button>

1.5 <code><span style="font-size: 16px;">ngProjectAs</span>ngProjectAs

ng-containerDalam beberapa kes, kita perlu menggunakan ngIf untuk meletakkan beberapa Kandungan dibalut dan dihantar ke komponen. Selalunya ia adalah kerana kita perlu menggunakan arahan struktur seperti ngSwitch atau

dsb. .

headerDalam contoh di bawah, kami telah membalut ng-container dengan

.

@Component({
    selector: 'app-card',
    template: `
		<div class="card">
		  <div class="header">
		    <ng-content select="header"></ng-content>
		  </div>
		  <div class="content">
		    <ng-content select="content"></ng-content>
		  </div>
		  <div class="footer">
		    <ng-content select="footer"></ng-content>
		  </div>
		  <ng-content></ng-content>
		</div>
`
})
export class AppCardComponent {}

Penggunaan:

<app-card>
  <ng-container>
    <header>
      <h1>Angular</h1>
    </header>
  </ng-container>
  <content>One framework. Mobile & desktop.</content>
  <footer><b>Super-powered by Google </b></footer>
</app-card>

ng-containerDisebabkan kewujudan header, bahagian selector tidak diberikan ke dalam slot yang ingin kami render, tetapi dijadikan no Sediakan sebarang ng-content dalam
. ngProjectAs Dalam kes ini kita boleh menggunakan atribut
. ng-container Tambahkan atribut ini pada

di atas untuk menjadikannya seperti yang kami jangkakan.

<app-card>
  <ng-container ngProjectAs=&#39;header&#39;>
    <header>
      <h1>Angular</h1>
    </header>
  </ng-container>
  <content>One framework. Mobile & desktop.</content>
  <footer><b>Super-powered by Google </b></footer>
</app-card>

二、 有条件的内容投影

如果你的元件需要有条件地渲染内容或多次渲染内容，则应配置该元件以接受一个 ng-template 元素，其中包含要有条件渲染的内容。

在这种情况下，不建议使用 ng-content 元素，因为只要元件的使用者提供了内容，即使该元件从未定义 ng-content 元素或该 ng-content 元素位于 ngIf 语句的内部，该内容也总会被初始化。

使用 ng-template 元素，你可以让元件根据你想要的任何条件显式渲染内容，并可以进行多次渲染。在显式渲染 ng-template 元素之前，Angular 不会初始化该元素的内容。

2.1 <span style="font-size: 16px;">ng-container</span>

既不是一个组件，也不是一个指令，仅仅是一个特殊的tag而已。 使用 ng-container 渲染所包含的模板内容，不包含自身。

• angular代码片段

<div>
  <ng-container>
    <p>My name is wyl.</p>
    <p>What is you name?</p>
  </ng-container>
</div>

• 浏览器调试窗口，可以发现 d4a8107efa96305af677e1edd4999c73 标签消失了，并没有起任何作用

<div>
  <p>My name is wyl.</p>
  <p>What is you name?</p>
</div>

• 使用场景，如下，在我们需要遍历或 if 判断 时，它可以承担一个载体的作用

<ul>
  <ng-container *ngFor="let item of items">
    <li>{{ item .name}}</li>
    <li>{{ item .age}}</li>
    <li>{{ item .sex}}</li>
  </ng-container>
</ul>

另外，ng 中常见错误之一的 for 和 if 不能写在同一标签上（在一个宿主元素上只能应用一个结构型指令），利用 ng-container 标签可以在实现功能的基础上减少层级的嵌套。

2.2 <span style="font-size: 16px;">ng-template</span>

先来看下面一段代码

<ng-template>
    <p> In template, no attributes. </p>
</ng-template>

<ng-container>
    <p> In ng-container, no attributes. </p>
</ng-container>

浏览器输出结果是：

In ng-container, no attributes.

即 6efee24582b35a5bc3ecd0628f23f6da 中的内容不会显示。当在上面的模板中添加 ngIf 指令：

<ng-template [ngIf]="true">
   <p> ngIf with a ng-template.</p>
</ng-template>

<ng-container *ngIf="true">
   <p> ngIf with an ng-container.</p>
</ng-container>

浏览器输出结果是：

ngIf with a ng-template.
ngIf with an ng-container.

2.3 <span style="font-size: 16px;">ng-template</span> 和 <span style="font-size: 16px;">d4a8107efa96305af677e1edd4999c73</span> 的配合使用

<ng-container *ngIf="showSearchBread; else tplSearchEmpty">
     暂时搜索不到您要的数据喔
</ng-container>
<ng-template #tplSearchEmpty>
     快快开始获取吧！
</ng-template>

2.4 <span style="font-size: 16px;">ngTemplateOutlet</span>

插入 ng-template 创建的内嵌视图。 ngTemplateOutlet 是一个结构型指令，接收一个 TemplateRef 类型的值；

<div *ngTemplateOutlet="tpl1"></div>
<ng-template #tpl1>
  <span>I am span in template {{title}}</span>
</ng-template>

*ngTemplateOutlet = "templateRefExp; content: contentExp "

• templateRefExp: ng-template 元素的 #ID
• contextExp:

  • 可空参数

  • content 是一个对象，这个对象可以包含一个 $implicit 的 key 作为默认值， 使用时在 模板 中用 let-key 语句进行绑定

  • content 的非默认字段需要使用 let-templateKey=contentKey 语句进行绑定

使用如下：

@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <ng-container *ngTemplateOutlet="greet"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
    <hr>
    <ng-template #greet><span>Hello</span></ng-template>
    <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
    <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
  myContext = {$implicit: &#39;World&#39;, localSk: &#39;Svet&#39;};
}

2.5 利用 <span style="font-size: 16px;">ngTemplateOutlet</span> 进行内容投影

@Component({
    selector: 'app-card',
    template: `
		<div class="card">
		  <div class="header">
		  	<ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: title, index: otherDate }"></ng-container>
		  </div>
		</div>
`
})
export class AppCardComponent {

	@ContentChild(&#39;header&#39;, { static: true }) headerTemplate: TemplateRef<any>;

	public title = &#39;Test&#39;;
	public otherDate = {
	 	auth: &#39;me&#39;,
	 	name: &#39;appCard&#39;
	};
}

使用

<app-card>
  <ng-template #header let-label let-item="otherDate">
    <h1>Angular</h1> {{label}} (Test) and  {{otherDate | json}} ({auth: &#39;me&#39;, name: &#39;appCard&#39;})
  </ng-template>
</app-card>

更多编程相关知识，请访问：编程教学！！

Atas ialah kandungan terperinci Mari kita bincangkan tentang kaedah unjuran kandungan dalam sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!