Eine kurze Diskussion darüber, wie Angular ng-Content für die Inhaltsprojektion verwendet

In diesem Artikel erfahren Sie, wie Sie ng-content für die Inhaltsprojektion verwenden, um flexible und wiederverwendbare Komponenten zu erstellen. ng-content 进行内容投影，来创建灵活的可复用组件。

ng-content

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

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

不使用内容投影

为了理解为什么要使用 ng-content 进行内容投影，首先让我们来创建一个很常见的 button 组件。

btn.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-btn',
  templateUrl: './btn.component.html',
  styleUrls: ['./btn.component.scss'],
})
export class BtnComponent {
  constructor() {}

  onClick($event: any) {
    console.log($event);
  }
}

btn.component.html

<button (click)=onClick($event)>
  Click Me
</button>

在这个组件中，button 的文本始终是 Click Me，如果我们想传递不同的文本进来呢？可能你会想到最常使用的 @Input 装饰器，但是如果我们不只是想传文本进来，而是传一段 html 进来呢？这个时候就需要用到这篇文章的主角：ng-content。

单插槽内容投影

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

要创建使用单插槽内容投影的组件，我们只需要对上面的组件进行一些简单的修改：把 Click Me 替换为 d553bd28b5bbbbd4b6fb4990edbabbf078e68693bbc3a4be56286441c90e88e6。

btn.component.html

<button (click)=onClick($event)>
  <ng-content></ng-content>
</button>

在使用 btn 组件的地方：

<app-btn>Cancel</app-btn>
<app-btn><b>Submit</b></app-btn>

在 4f5ea333ca342b306353367e241915b03e56165a02e29eb7b68166825115687f 中的内容会传递给 btn 组件，并且显示在 ng-contnet 中。

多插槽内容投影

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

要创建使用多插槽内容投影的组件，需要执行以下操作：

• 创建一个组件。

• 在组件模板中，添加 ng-content 元素，让你希望投影的内容出现在其中。

• 将 select 属性添加到 ng-content 元素。 Angular 使用的选择器支持标签名、属性、CSS 类和 :not 伪类的任意组合。

下面我们来创建一个复杂一些的 card 组件。

card.component.html

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

在使用 card 组件的地方：

app.component.html

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

<app-card>
  <header>
    <h1 style="color:red;">React</h1>
  </header>
  <content>A JavaScript library for building user interfaces</content>
  <footer><b>Facebook Open Source </b></footer>
</app-card>

如果在 app-card 中有不属于 header, content, footer 之外的内容呢？比如按照下面的写法使用 app-card 组件：

app.component.html

<app-card>
  <header>
    <h1>Angular</h1>
  </header>
  <div>Not match any selector</div>
  <content>One framework. Mobile & desktop.</content>
  <footer><b>Super-powered by Google </b></footer>
  <div>This text will not not be shown</div>
</app-card>

会发现两个 div 都没有渲染在页面中，为了解决这个问题，我们可以在组件中添加一个没有任何 selector 的 ng-content 标签。所有没办法匹配到任何其他插槽的内容都会被渲染在这个里面。

card.component.html

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

ngProjectAs

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

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

<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

ng-content

ng-content-Element ist ein Platzhalter, der zum Einfügen externer oder dynamischer Inhalte verwendet wird. Die übergeordnete Komponente übergibt externe Inhalte an die untergeordnete Komponente. Wenn Angular

die Vorlage analysiert, wird dies der Fall sein Fügen Sie in der untergeordneten Komponente externen Inhalt ein, wo ng-content in der Komponentenvorlage erscheint. Wir können die Inhaltsprojektion nutzen, 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 häufig, wenn wir einige öffentliche Komponenten kapseln. [Empfohlene verwandte Tutorials: „Angular-Tutorial

"]🎜

Keine Inhaltsprojektion verwenden

🎜Um zu verstehen, warum wir ng-content für die Inhaltsprojektion verwenden müssen, erstellen wir zunächst eine sehr häufige Schaltflächenkomponente. 🎜🎜btn.component.ts🎜

<app-card>
  <ng-container ngProjectAs=&#39;header&#39;>
    ...
</app-card>

🎜btn.component.html🎜rrreee🎜In dieser Komponente lautet der Text der Schaltfläche immer Click Me. Was ist, wenn wir anderen Text übergeben möchten? Sie denken vielleicht an den am häufigsten verwendeten @Input-Dekorator, aber was ist, wenn wir nicht nur Text, sondern ein Stück HTML übergeben möchten? Zu diesem Zeitpunkt müssen Sie den Protagonisten dieses Artikels verwenden: ng-content. 🎜

Single-Slot-Inhaltsprojektion

🎜Die grundlegendste Form der Inhaltsprojektion ist die Single-Slot-Inhaltsprojektion. Bei der Inhaltsprojektion in einem einzelnen Slot handelt es sich um die Erstellung einer Komponente, in die wir eine Komponente projizieren können. 🎜🎜Um eine Komponente zu erstellen, die die Single-Slot-Inhaltsprojektion verwendet, müssen wir nur einige einfache Änderungen an der obigen Komponente vornehmen: Ersetzen Sie Click Me durch d553bd28b5bbbbd4b6fb4990edbabbf0ba22001b28acfb2a18c352b93b048eb9. 🎜🎜btn.component.html🎜rrreee🎜Wo die BTN-Komponente verwendet wird: 🎜rrreee🎜Der Inhalt in 4f5ea333ca342b306353367e241915b03e56165a02e29eb7b68166825115687f wird an die BTN-Komponente übergeben , Und in ng-contnet angezeigt. 🎜

Multi-Slot-Inhaltsprojektion

🎜Die obige BTN-Komponente ist sehr einfach, aber tatsächlich ist ng-content leistungsfähiger. Eine Komponente kann mehrere Slots haben und jeder Slot kann einen 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. 🎜🎜Um eine Komponente zu erstellen, die die Multi-Slot-Inhaltsprojektion verwendet, müssen Sie Folgendes tun: 🎜

• 🎜Erstellen Sie eine Komponente. 🎜
• 🎜Fügen Sie in der Komponentenvorlage das Element ng-content hinzu, damit der Inhalt, den Sie projizieren möchten, darin erscheint. 🎜
• 🎜Fügen Sie das Attribut select zum Element ng-content hinzu. Die von Angular verwendeten Selektoren unterstützen jede Kombination aus Tag-Namen, Attributen, CSS-Klassen und :not-Pseudoklassen. 🎜

🎜Lassen Sie uns eine komplexere Kartenkomponente erstellen. 🎜🎜card.component.html🎜rrreee🎜Wo die Kartenkomponente verwendet wird: 🎜🎜app.component.html🎜rrreee🎜Wenn es Elemente in app-card gibt, die nicht Kopfzeile, Inhalt oder Fußzeile sind Wie sieht es mit dem Inhalt aus? Wenn Sie beispielsweise die Komponente app-card wie folgt verwenden: 🎜🎜app.component.html🎜rrreee🎜, werden Sie feststellen, dass beide div nicht auf der Seite gerendert werden Um dieses Problem zu lösen, können wir ein ng-content-Tag ohne selector in der Komponente hinzufügen. Alle Inhalte, die keinem anderen Slot entsprechen, werden in diesem gerendert. 🎜🎜card.component.html🎜rrreee

ngProjectAs

🎜In einigen Fällen müssen wir ng-container verwenden, um einige Inhalte zu verpacken es an die Komponente an. Meistens liegt es daran, dass wir strukturelle Direktiven wie ngIf oder ngSwitch usw. verwenden müssen. Header werden beispielsweise nur unter bestimmten Umständen an die Kartenkomponente übergeben. 🎜🎜Im folgenden Beispiel verpacken wir den Header in ng-container. 🎜rrreee🎜Aufgrund der Existenz von ng-container wird der Header-Teil nicht in dem Slot gerendert, den wir rendern möchten, sondern in ng-content, der nicht bereitgestellt wird beliebiger Selektorcode> in. 🎜🎜In diesem Fall können wir das Attribut ngProjectAs verwenden. 🎜🎜Fügen Sie dieses Attribut zum ng-container oben hinzu, und Sie können es gemäß unseren Erwartungen rendern. 🎜rrreee🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie Angular ng-Content für die Inhaltsprojektion verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!