Angular의 구성 요소에 템플릿 전달

이 글에서는 Angular가 템플릿을 컴포넌트에 전달하는 두 가지 방법을 주로 소개합니다. 첫 번째 방법은 <ng-content> 두 번째 방법은 NgTemplateOutlet 명령과 다양한 사용 방법입니다.

최근 글을 쓸 때. 날짜 선택기 컴포넌트는 향후 발생할 수 있는 다양한 요구 사항을 충족하기 위해 컴포넌트의 스타일을 고도로 맞춤화할 수 있어야 합니다. 이 목표를 달성하려면 휴일 표시와 같이 날짜 선택기 구성 요소 외부의 각 날짜 표에 표시되는 콘텐츠를 제어할 수 있어야 합니다. 이때 호출자는 구성 요소 템플릿의 일부를 제공해야 합니다.

React에서 이 요구 사항은 date => Element 와 같은 함수를 구현하기만 하면 됩니다. 그러나 Angular 템플릿은 순수 템플릿이므로 이 기능을 구현하는 데 몇 가지 특수한 개념이 필요합니다. date => Element 这样的函数就好了，但是 Angular 模板是纯粹的模板，需要使用一些专门的概念才能实现这个功能。

第一种方式 <ng-content>

<ng-content> 这个标签到本文撰写时为止，还没有官方的文档，甚至连占位符都没有。但是这并不妨碍我们的使用，外国热心网友已经总结出了 <ng-content> 在现阶段的特点与作用。

基本用法

<!-- Wrapper.Component.html -->
<p>
  hello
  <ng-content></ng-content>
</p>

假设我们有一个上述的组件，然后向下面这样调用：

<wrapper>
  <span> World </span>
</wrapper>

那么最终的渲染结果将会是这样的：

<p>
  hello
  <span> World </span>
</p>

看起来就是发生了很简单的替换，但是如果在 Wrapper 中出现了多个 <ng-content> 会出现多个 World 吗？答案是不会的。<ng-content> 的本质只是移动元素，并不会去自动的创建传入的模板，所以就算用 ngFor 套住 <ng-content> 也不会出现很多个 World 。如果传入的是自定义的组件，这些组件也只会被实例化一次。

进阶用法

当然，如果 <ng-content> 的功能仅仅只是这样就显得太鸡肋了，在使用 <ng-content> 的时候可以指定一个选择器，这个选择器可以捕获相符的直接子元素。例如：

<!-- Wrapper.Component.html -->
<p>
  hello
  <ng-content></ng-content>
  <hr/>
  <ng-content select="span"></ng-content>
</p>

然后像下面这样使用：

<wrapper>
  <span> World </span>
  2333
</wrapper>

最终的渲染结果将会是这样：

<p>
  hello
  2333
  <hr/>
  <span> World </span>
</p>

除了设置 ng-content 标签的 select 属性之外，还可以在子元素上使用 ngProjectAs 属性，这个属性可以让这个元素被父元素中指定的 ng-content 所捕获。举个例子：

<wrapper>
  <p ngProjectAs="span"> World </p>
  2333
</wrapper>

这次被传入的模板变成了一个 p，但是因为设置了 ngProjectAs，所以“World”会出现在分割线下方。

第二种方式 NgTemplateOutlet 指令

使用 ng-content 确实可以起到传入模板的效果，但是却有个很致命的问题，就是无法传递数据到传入的模板中。为了将数据传递到传入的模板中，就需要使用到 NgTemplateOutlet 指令。

基本使用

这个指令可以用来在模板的指定位置实例化一个 TemplateRef 对象，同时，在实例化的过程中还可以传入一个数据对象。而 TemplateRef 可以通过 ng-template 标签来创建，举个例子：

@Component({
 selector: 'ng-template-outlet-example',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>

  <ng-template #name let-name="data"><span>Hello {{name}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
 myContext = {data: &#39;World&#39;};
}

ng-container 是一个虚拟的元素，在这个元素上我们使用了一个 NgTemplateOutlet 指令，指定了要实例化下面的名为 name 的 ng-template。同时把 myContext 这个对象作为实例化的数据上下文传入，所以最终就会显示 “Hello World!”。值得注意的是在 ng-template 里面获取传输的数据上下文的方式：let-variableName='key'

@Component({
 selector: 'wrapper',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>
`
})
class NgTemplateOutletExample {
 @ContentChild(TemplateRef) name: TemplateRef<any>;
 myContext = {data: &#39;World&#39;};
}

<wrapper>
  <ng-template let-value="data">
    <span>Hello {{value}}!</span>
  </ng-template>
</wrapper>