Lassen Sie uns über die Methode der Inhaltsprojektion in Angular sprechen

In diesem Artikel geht es um die Inhaltsprojektion in Angular, es wird die Methode zur Verwendung von NG-Content für die Inhaltsprojektion vorgestellt und die Implementierungsmethode der bedingten Inhaltsprojektion erläutert. Ich hoffe, dass dies für alle hilfreich ist!

1. ng-content für die Inhaltsprojektion

ng-content 进行内容投影

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

ng-content 元素是一个用来插入外部或者动态内容的占位符。父组件将外部内容传递给子组件，当 Angular 解析模板时，就会在子组件模板中 ng-content 出现的地方插入外部内容。【相关教程推荐：《angular教程》】

我们可以使用内容投影来创建可重用的组件。这些组件有相似的逻辑和布局，并且可以在许多地方使用。一般我们在封装一些公共组件的时候经常会用到。

1.2 为什么使用内容投影

定义一个 button 组件：

button-component.ts

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

这个 button 组件的目的是在按钮内部加一个搜索的图标，我们实际使用如下：

<button appButton>click</button>

我们发现组件只会展示搜索图标， 按钮的文本不会展示，能你会想到最常使用的 @Input 装饰器，但是如果我们不只是想传文本进来，而是传一段 html 进来呢？此时就会用到 ng-content。

1.3 单插槽内容投影

内容投影的最基本形式是单插槽内容投影。

单插槽内容投影是指创建一个组件，我们可以在其中投影一个组件。

以 button 组件为例，创建一个单槽内容投影：

button-component.ts

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

实际使用如下：

<button appButton>click</button>

可以发现，现在这个 button 组件的效果是即显示了搜索图标，又显示了按钮的文本（click）。即把 <button appButton></button> 中间的内容 投影 到了组件的 <ng-content></ng-content> 位置。

ng-content 元素是一个占位符，它不会创建真正的 DOM 元素。ng-content 的那些自定义属性将被忽略。

1.4 多插槽内容投影

一个组件可以具有多个插槽，每个插槽可以指定一个 CSS 选择器，该选择器会决定将哪些内容放入该插槽。该模式称为多插槽内容投影。使用此模式，我们必须指定希望投影内容出现在的位置。可以通过使用 ng-content 的 select 属性来完成此任务。

• 组件模板含有多个 ng-content 标签。
• 为了区分投影的内容可以投影到对应 ng-content 标签，需要使用 ng-content 标签上的 select 属性作为识别。
• select 属性支持标签名、属性、CSS 类和 :not 伪类的任意组合。
• 不添加 select 属性的 ng-content 标签将作为默认插槽。所有未匹配的投影内容都会投影在该 ng-content 的位置。

以 button 组件为例，创建一个多槽内容投影：

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 {}

实际使用如下：

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

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

在某些情况下，我们需要使用 ng-container 把一些内容包裹起来传递到组件中。大多数情况是因为我们需要使用结构型指令像 ngIf 或者 ngSwitch 等。。

在下面的例子中，我们将 header 包裹在了 ng-container 中。

@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 {}

使用：

<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-container 的存在，header 部分并没有被渲染到我们想要渲染的插槽中，而是渲染到了没有提供任何 selector 的 ng-content 中。
在这种情况下，我们可以使用 ngProjectAs 属性。
在上面的 ng-container

1.1 < code><span style="font-size: 16px;">ng-content</span>🎜🎜ng-content-Element wird zum Einfügen externer oder < verwendet code>Platzhalter für dynamische Inhalte. Die übergeordnete Komponente übergibt externen Inhalt an die untergeordnete Komponente. Wenn Angular die Vorlage analysiert, wird sie in der untergeordneten Komponentenvorlage angezeigt, wo ng-content ist erscheint. Externen Inhalt einfügen. [Verwandte Tutorial-Empfehlung: „🎜Angular-Tutorial🎜“]🎜🎜Wir können die Inhaltsprojektion verwenden, um wiederverwendbare Komponenten zu erstellen. Diese Komponenten haben eine ähnliche Logik und ein ähnliches Layout und können an vielen Stellen verwendet werden. Im Allgemeinen verwenden wir es oft, wenn wir einige öffentliche Komponenten kapseln. 🎜🎜🎜1.2 Warum Inhaltsprojektion verwenden🎜🎜Definieren Sie eine Schaltflächenkomponente: 🎜🎜button-component.ts 🎜

<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>

🎜Der Zweck dieser Schaltflächenkomponente besteht darin, ein Suchsymbol in die Schaltfläche einzufügen. Wir verwenden es tatsächlich wie folgt: 🎜

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

🎜Wir haben festgestellt, dass die Komponente nur das Suchsymbol anzeigt, der Text der Schaltfläche jedoch nicht Sie werden an den am häufigsten verwendeten @Input-Dekorator denken, aber was ist, wenn wir nicht nur Text, sondern ein Stück html übergeben möchten? ng-content wird zu diesem Zeitpunkt verwendet. 🎜🎜🎜1.3 Single-Slot-Inhaltsprojektion🎜🎜Die grundlegendste Form der Inhaltsprojektion ist Single-Slot-Inhaltsprojektion</ Code >. 🎜<blockquote>🎜Einzelne Slot-Inhaltsprojektion bedeutet, eine Komponente zu erstellen, in die wir eine Komponente projizieren können. 🎜</blockquote>🎜Nehmen Sie die Schaltflächenkomponente als Beispiel, um eine Inhaltsprojektion mit einem Slot zu erstellen: 🎜🎜<code>button-component.ts🎜

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

🎜Die tatsächliche Verwendung ist wie folgt: 🎜

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

🎜Sie Sie können feststellen, dass jetzt die Schaltflächenkomponente vorhanden ist. Der Effekt besteht darin, dass sowohl das Suchsymbol als auch der Schaltflächentext (Klick) angezeigt werden. Das heißt, der Inhalt in der Mitte von <button appButton></button> wird auf <ng-content></ng <code>projiziert -content>< /code> Speicherort. 🎜

🎜ng-content-Element ist ein Platzhalter, es erstellt kein echtes DOM-Element. Diese benutzerdefinierten Attribute von ng-content werden ignoriert. 🎜

🎜🎜1.4 Multi-Slot-Inhaltsprojektion🎜🎜Eine Komponente kann mehrere Slots</code > haben, Jeder Slot kann einen <code>CSS-Selektor angeben, der bestimmt, welcher Inhalt in diesen Slot eingefügt wird. Dieser Modus wird als Multi-Slot-Inhaltsprojektion bezeichnet. In diesem Modus müssen wir angeben, wo der projizierte Inhalt erscheinen soll. Dies kann durch die Verwendung des select-Attributs von ng-content erreicht werden. 🎜

• Die Komponentenvorlage enthält mehrere ng-content-Tags.
• Um den projizierten Inhalt zu unterscheiden, der auf das entsprechende ng-content-Tag projiziert werden kann, müssen Sie select</code für <code>ng verwenden -content Tag > Attribute als Bezeichner.
• Das Attribut select unterstützt Tag-Name, Eigenschaft, CSS-Klasse und : Jede Kombination von Nicht-Pseudoklassen.
• ng-content-Tags ohne das Hinzufügen des select-Attributs dienen als Standardslot. Alle nicht übereinstimmenden projizierten Inhalte werden an diesem ng-content-Speicherort projiziert.

🎜Nehmen Sie die Schaltflächenkomponente als Beispiel, um eine Inhaltsprojektion mit mehreren Slots zu erstellen: 🎜🎜button-component.ts🎜

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

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

🎜Die tatsächliche Verwendung ist wie folgt: 🎜

In ng-container, no attributes.

🎜🎜1.5 <span style="font-size: 16px;">ngProjectAs</span> 🎜🎜In einigen Fällen müssen wir als nächstes ng-container verwenden, um einige Inhalte zu verpacken und an die Komponente zu übergeben. Meistens liegt es daran, dass wir strukturelle Direktiven wie ngIf oder ngSwitch usw. verwenden müssen. . 🎜🎜Im folgenden Beispiel verpacken wir header in ng-container. 🎜

<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>

🎜Verwendung: 🎜

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

🎜Aufgrund der Existenz von ng-container wird der header-Teil nicht in den Slot gerendert, den wir rendern möchten, sondern in Nr Geben Sie einen beliebigen Selektor in ng-content an.
In diesem Fall können wir das Attribut ngProjectAs verwenden.
Durch das Hinzufügen dieses Attributs zum obigen ng-container wird es wie erwartet gerendert. 🎜

<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>

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

<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.

即 <ng-template> 中的内容不会显示。当在上面的模板中添加 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> 和 <ng-container> 的配合使用

<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>

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

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Methode der Inhaltsprojektion in Angular sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!