Angular 向组件传递模板的两种方法

最近在写一个日期选择器组件，为了满足将来可能出现的各种需求，所以需要能够高度的自定义组件的样式。为了达到这个目的，需要能够在日期选择器组件外控制每个日期格子内要显示的内容，比如，标上节假日之类的。这时候，组件的一部分模板就需要由调用方提供。

在 React 里面，这种需求挺简单的，只要实现一个 date => Element 这样的函数就好了，但是 Angular 模板是纯粹的模板，需要使用一些专门的概念才能实现这个功能。

第一种方式 <ng-content>

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

基本用法

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

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

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

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

<div>  hello  <span> World </span></div>

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

进阶用法

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

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

然后像下面这样使用：

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

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

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

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

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

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