Angular가 콘텐츠 프로젝션을 위해 ng-content를 사용하는 방법에 대한 간략한 토론

이 기사에서는 콘텐츠 프로젝션에 ng-content를 사용하여 유연하고 재사용 가능한 구성 요소를 만드는 방법을 살펴보겠습니다. 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 요소는 외부 또는 동적 콘텐츠를 삽입하는 데 사용되는 자리 표시자입니다. 상위 구성 요소는 외부 콘텐츠를 하위 구성 요소에 전달합니다. Angular

가 템플릿을 구문 분석하면 하위 구성 요소에 구성 요소 템플릿에 ng-content가 나타나는 외부 콘텐츠를 삽입합니다. 콘텐츠 프로젝션을 사용하여 재사용 가능한 구성 요소를 만들 수 있습니다. 이러한 구성 요소는 비슷한 논리와 레이아웃을 가지며 여러 곳에서 사용될 수 있습니다. 일반적으로 일부 공용 구성 요소를 캡슐화할 때 종종 사용합니다. [추천 관련 튜토리얼: "Angular 튜토리얼

"]🎜

콘텐츠 투영을 사용하지 않음

🎜콘텐츠 투영에 ng-content를 사용해야 하는 이유를 이해하기 위해 먼저 매우 일반적인 버튼 구성 요소를 만들어 보겠습니다. 🎜🎜btn.comComponent.ts🎜

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

🎜btn.comComponent.html🎜rrreee🎜 이 구성 요소에서 버튼의 텍스트는 항상 Click Me입니다. 다른 텍스트를 전달하려면 어떻게 해야 할까요? 가장 일반적으로 사용되는 @Input 데코레이터가 생각날 수도 있지만, 텍스트만 전달하는 것이 아니라 HTML 조각도 전달하고 싶다면 어떻게 해야 할까요? 이때 이 글의 주인공인 ng-content를 활용해야 합니다. 🎜

단일 슬롯 콘텐츠 프로젝션

🎜 가장 기본적인 콘텐츠 프로젝션 형태는 단일 슬롯 콘텐츠 프로젝션입니다. 단일 슬롯 콘텐츠 프로젝션은 구성 요소를 프로젝션할 수 있는 구성 요소를 만드는 것을 의미합니다. 🎜🎜단일 슬롯 콘텐츠 프로젝션을 사용하는 구성 요소를 만들려면 위 구성 요소에 대해 몇 가지 간단한 수정만 하면 됩니다. Click Me를 d553bd28b5bbbbd4b6fb4990edbabbf05681ddbeb954064824773b53d55ad1e9. 🎜🎜btn.comComponent.html🎜rrreee🎜btn 구성 요소가 사용되는 위치: 🎜rrreee🎜 4f5ea333ca342b306353367e241915b03e56165a02e29eb7b68166825115687f의 콘텐츠가 btn 구성 요소로 전달됩니다. , ng-contnet에 표시됩니다. 🎜

멀티 슬롯 콘텐츠 프로젝션

🎜위의 btn 구성 요소는 매우 간단하지만 실제로는 ng-content가 이보다 더 강력합니다. 구성 요소에는 여러 개의 슬롯이 있을 수 있으며 각 슬롯은 해당 슬롯에 들어갈 콘텐츠를 결정하는 CSS 선택기를 지정할 수 있습니다. 이 모드를 멀티 슬롯 콘텐츠 프로젝션이라고 합니다. 이 모드를 사용하면 투영된 콘텐츠를 표시할 위치를 지정해야 합니다. 이는 ng-content의 select 속성을 ​​사용하여 수행할 수 있습니다. 🎜🎜멀티 슬롯 콘텐츠 프로젝션을 사용하는 구성 요소를 만들려면 다음을 수행해야 합니다. 🎜

• 🎜구성 요소를 만듭니다. 🎜
• 🎜프로젝션하려는 콘텐츠가 표시되도록 구성 요소 템플릿에 ng-content 요소를 추가하세요. 🎜
• 🎜 ng-content 요소에 select 속성을 ​​추가하세요. Angular에서 사용하는 선택기는 태그 이름, 속성, CSS 클래스 및 :not 의사 클래스의 모든 조합을 지원합니다. 🎜

🎜더 복잡한 카드 구성 요소를 만들어 보겠습니다. 🎜🎜card.comComponent.html🎜rrreee🎜카드 컴포넌트가 사용되는 곳 : 🎜🎜app.comComponent.html🎜rrreee🎜 app-card에 header, content, footer가 아닌 요소가 있는 경우 내용은 어떻습니까? 예를 들어, app-card 구성 요소를 다음과 같이 사용하는 경우: 🎜🎜app.comComponent.html🎜rrreee🎜, 두 div가 모두 렌더링되지 않음을 알 수 있습니다. 이 문제를 해결하기 위해 구성 요소에 selector 없이 ng-content 태그를 추가할 수 있습니다. 다른 슬롯과 일치하지 않는 모든 콘텐츠는 이 슬롯에서 렌더링됩니다. 🎜🎜card.comComponent.html🎜rrreee

ngProjectAs

🎜경우에 따라 ng-container를 사용하여 일부 콘텐츠를 래핑해야 합니다. 구성 요소에 있습니다. 대부분의 경우 ngIf 또는 ngSwitch 등과 같은 구조적 지시문을 사용해야 하기 때문입니다. 예를 들어 헤더는 특정 상황에서만 카드 구성 요소에 전달됩니다. 🎜🎜아래 예에서는 헤더를 ng-container로 래핑합니다. 🎜rrreee🎜ng-container의 존재로 인해 헤더 부분은 렌더링하려는 슬롯에 렌더링되지 않고 제공하지 않는 ng-content에 렌더링됩니다. 모든 선택기 > in. 🎜🎜이 경우 ngProjectAs 속성을 ​​사용할 수 있습니다. 🎜🎜위의 ng-container에 이 속성을 추가하면 예상대로 렌더링할 수 있습니다. 🎜rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 Angular가 콘텐츠 프로젝션을 위해 ng-content를 사용하는 방법에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!