Une brève discussion sur la façon dont Angular utilise ng-content pour la projection de contenu

Dans cet article, nous explorerons comment utiliser ng-content pour la projection de contenu afin de créer des composants flexibles et réutilisables. 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-containerL'élément

ng-content

ng-content est un espace réservé utilisé pour insérer du contenu externe ou dynamique. Le composant parent transmet le contenu externe au composant enfant lorsque Angular

analyse le modèle, ce sera le cas. dans le composant enfant. Insérez du contenu externe là où ng-content apparaît dans le modèle de composant. Nous pouvons utiliser la projection de contenu pour créer des composants réutilisables. Ces composants ont une logique et une disposition similaires et peuvent être utilisés dans de nombreux endroits. Généralement, nous l'utilisons souvent pour encapsuler certains composants publics. [Tutoriels associés recommandés : "tutoriel angulaire

"]🎜

Ne pas utiliser la projection de contenu

🎜Afin de comprendre pourquoi nous devons utiliser ng-content pour la projection de contenu, créons d'abord un composant de bouton très courant. 🎜🎜btn.component.ts🎜

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

🎜btn.component.html🎜rrreee🎜Dans ce composant, le texte du bouton est toujours Cliquez sur moi. Et si nous voulons transmettre un texte différent ? Vous pensez peut-être au décorateur @Input le plus couramment utilisé, mais que se passe-t-il si nous ne voulons pas simplement transmettre du texte, mais un morceau de code HTML ? À ce stade, vous devez utiliser le protagoniste de cet article : ng-content. 🎜

Projection de contenu sur un seul emplacement

🎜La forme la plus basique de projection de contenu est la projection de contenu sur un seul emplacement. La projection de contenu à emplacement unique signifie créer un composant dans lequel nous pouvons projeter un composant. 🎜🎜Pour créer un composant utilisant la projection de contenu à emplacement unique, il suffit d'apporter quelques modifications simples au composant ci-dessus : remplacez Click Me par d553bd28b5bbbbd4b6fb4990edbabbf0ba22001b28acfb2a18c352b93b048eb9. 🎜🎜btn.component.html🎜rrreee🎜Où le composant btn est utilisé : 🎜rrreee🎜Le contenu de 4f5ea333ca342b306353367e241915b03e56165a02e29eb7b68166825115687f sera transmis au composant btn , Et affiché dans ng-contnet. 🎜

Projection de contenu multi-slot

🎜Le composant btn ci-dessus est très simple, mais en fait ng-content est plus puissant que cela. Un composant peut avoir plusieurs emplacements, et chaque emplacement peut spécifier un sélecteur CSS qui détermine le contenu qui va dans cet emplacement. Ce mode est appelé Projection de contenu multi-emplacements. En utilisant ce mode, nous devons spécifier où nous voulons que le contenu projeté apparaisse. Cela peut être accompli en utilisant l'attribut select de ng-content. 🎜🎜Pour créer un composant qui utilise la projection de contenu multi-emplacements, vous devez procéder comme suit : 🎜

• 🎜Créez un composant. 🎜
• 🎜Dans le modèle de composant, ajoutez l'élément ng-content à l'endroit où apparaît le contenu que vous souhaitez projeter. 🎜
• 🎜Ajoutez l'attribut select à l'élément ng-content. Les sélecteurs utilisés par Angular prennent en charge toute combinaison de noms de balises, d'attributs, de classes CSS et de pseudo-classes :not. 🎜

🎜Créons un composant de carte plus complexe. 🎜🎜card.component.html🎜rrreee🎜Où le composant de carte est utilisé : 🎜🎜app.component.html🎜rrreee🎜S'il y a des éléments dans app-card qui ne sont pas un en-tête, un contenu, un pied de page Et le contenu ? Par exemple, si vous utilisez le composant app-card comme suit : 🎜🎜app.component.html🎜rrreee🎜 vous constaterez que les deux div ne sont pas rendus dans la page. Afin de résoudre ce problème Question, nous pouvons ajouter une balise ng-content sans aucun sélecteur dans le composant. Tout le contenu qui ne correspond à aucun autre emplacement sera rendu dans celui-ci. 🎜🎜card.component.html🎜rrreee

ngProjectAs

🎜Dans certains cas, nous devons utiliser ng-container pour envelopper du contenu. au composant. La plupart du temps, c'est parce que nous devons utiliser des directives structurelles comme ngIf ou ngSwitch etc. Par exemple, les en-têtes ne sont transmis au composant de carte que dans certaines circonstances. 🎜🎜Dans l'exemple ci-dessous, nous enveloppons l'en-tête dans ng-container. 🎜rrreee🎜En raison de l'existence de ng-container, la partie d'en-tête n'est pas rendue dans l'emplacement que nous voulons restituer, mais est rendue dans ng-contentqui ne fournit pas n’importe quel code> dans. 🎜🎜Dans ce cas, nous pouvons utiliser l'attribut ngProjectAs. 🎜🎜Ajoutez cet attribut au ng-container ci-dessus et vous pourrez le restituer comme prévu. 🎜rrreee🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Enseignement de la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!