이 글은 angular에서의 콘텐츠 투영에 대해 이야기하고, 콘텐츠 투영을 위해 ng-content를 사용하는 방법을 소개하며, 조건부 콘텐츠 투영의 구현 방법을 이해하는 것이 모든 사람에게 도움이 되기를 바랍니다.
ng-contentng-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
ng-content 요소는 외부 또는 < 동적 콘텐츠를 위한 code>자리 표시자입니다. 상위 구성 요소는 외부 콘텐츠를 하위 구성 요소에 전달합니다. Angular가 템플릿을 구문 분석하면 ng-content가 있는 하위 구성 요소 템플릿에 나타납니다. 외부 콘텐츠를 삽입합니다. [관련 튜토리얼 추천: "🎜angular tutorial🎜"]🎜🎜콘텐츠 프로젝션을 사용하여 재사용 가능한 구성 요소를 만들 수 있습니다. 이러한 구성 요소는 비슷한 논리와 레이아웃을 가지며 여러 곳에서 사용될 수 있습니다. 일반적으로 일부 공개 구성요소를 캡슐화할 때 이를 자주 사용합니다. 🎜🎜🎜1.2 콘텐츠 프로젝션을 사용하는 이유🎜🎜버튼 구성 요소 정의: 🎜🎜button-comComponent.ts 🎜<app-card>
<ng-container ngProjectAs='header'>
<header>
<h1>Angular</h1>
</header>
</ng-container>
<content>One framework. Mobile & desktop.</content>
<footer><b>Super-powered by Google </b></footer>
</app-card><div>
<ng-container>
<p>My name is wyl.</p>
<p>What is you name?</p>
</ng-container>
</div>@Input 데코레이터가 생각나겠지만, 텍스트만 전달하는 것이 아니라 html의 일부를 전달하고 싶다면 어떻게 해야 할까요? 이때 ng-content가 사용됩니다. 🎜🎜🎜1.3 단일 슬롯 콘텐츠 투영🎜🎜콘텐츠 투영의 가장 기본적인 형태는 단일 슬롯 콘텐츠 투영입니다. 코드>. 🎜🎜단일 슬롯 콘텐츠 프로젝션은 구성 요소를 프로젝션할 수 있는 구성 요소를 만드는 것을 의미합니다. 🎜🎜단일 슬롯 콘텐츠 프로젝션을 생성하려면 버튼 구성 요소를 예로 들어보세요. 🎜🎜
button-comComponent.ts🎜<div> <p>My name is wyl.</p> <p>What is you name?</p> </div>
<ul>
<ng-container *ngFor="let item of items">
<li>{{ item .name}}</li>
<li>{{ item .age}}</li>
<li>{{ item .sex}}</li>
</ng-container>
</ul><button appButton></button> 중간에 있는 콘텐츠가 구성 요소의 <ng-content></에 <code>투영됩니다. ng-content>< /code> 위치. 🎜🎜ng-content 요소는 자리 표시자이며 실제 DOM 요소를 생성하지 않습니다. ng-content의 해당 사용자 정의 속성은 무시됩니다. 🎜🎜🎜1.4 다중 슬롯 콘텐츠 투영🎜🎜구성 요소는
여러 슬롯을 가질 수 있습니다. 각 슬롯은 해당 슬롯에 들어갈 콘텐츠를 결정하는 CSS 선택기를 지정할 수 있습니다. 이 모드를 멀티 슬롯 콘텐츠 프로젝션이라고 합니다. 이 모드를 사용하면 투영된 콘텐츠를 표시할 위치를 지정해야 합니다. 이는 ng-content의 select 속성을 사용하여 수행할 수 있습니다. 🎜여러 ng-content 태그가 포함되어 있습니다. ng-content 태그에 프로젝션할 수 있는 프로젝션된 콘텐츠를 구별하려면 ng에서 <code>select</code를 사용해야 합니다. -content tag > 식별자로서의 속성. select 속성은 태그 이름, 속성, CSS 클래스 및 를 지원합니다. : 의사 클래스가 아닌 조합. ng-content 태그는 select 속성을 추가하지 않으면 기본 슬롯으로 사용됩니다. 일치하지 않는 모든 프로젝션 콘텐츠는 해당 ng-content 위치에 프로젝션됩니다. button-comComponent.ts🎜<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.
<span style="font-size: 16px;">ngProjectAs</span> 🎜🎜어떤 경우에는 ng-container를 사용하여 일부 콘텐츠를 래핑하고 구성 요소에 전달해야 합니다. 대부분의 경우 ngIf 또는 ngSwitch 등과 같은 구조적 지시문을 사용해야 하기 때문입니다. . 🎜🎜아래 예에서는 ng-container에 header를 래핑합니다. 🎜<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.
ng-container의 존재로 인해 header 부분은 렌더링하려는 슬롯에 렌더링되지 않고 no로 렌더링됩니다. ng-content에 selector를 제공하세요. ngProjectAs 속성을 사용할 수 있습니다. ng-container에 이 속성을 추가하면 예상대로 렌더링됩니다. 🎜<app-card>
<ng-container ngProjectAs='header'>
<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 渲染所包含的模板内容，不包含自身。
<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 "
ng-template 元素的 #ID可空参数
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: 'World', localSk: 'Svet'};
}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('header', { static: true }) headerTemplate: TemplateRef<any>;
public title = 'Test';
public otherDate = {
auth: 'me',
name: 'appCard'
};
}使用
<app-card>
<ng-template #header let-label let-item="otherDate">
<h1>Angular</h1> {{label}} (Test) and {{otherDate | json}} ({auth: 'me', name: 'appCard'})
</ng-template>
</app-card>更多编程相关知识，请访问：编程教学！！
위 내용은 각도로 콘텐츠를 프로젝션하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
