angular中ng-container、ng-content和ng-template的用法

说明

鉴于angular中对ng-template的说明比较分散，这里专门对ng-template进行解析说明，并总结相关的几个关联性指令。

内容

1 ng-container

说明：在官方文档中，我们一般会在哪些地方看到ng-container呢？没错，在内容投影！当然大概率也会在内置指令和模版变量中有它的身影。但是，最为经典的，还是在内容投影中的释义。

<ng-container>是一个分组元素，不会产生dom;

简而言之：ng-container标签的使用，不会在dom中产生标签
举个例子：如下

比如说，我们定义一段代码，如上所示。我们把详细资料放到ng-container里面，我们看一下元素的dom排版

我们发现标红的文字没有被任何标签包裹。

2 ng-content

说到ng-content标签，我们就不得不着重的提一下我们上面说的内容投影这个东西了。在vue中，内容投影其实就是插槽。而在angular的官方解释中，它把内容投影也分为了以下几类：

1. 单插槽内容投影
2. 多插槽内容投影
3. 有条件的内容投影

1 单插槽

我们首先来看下单插槽的内容投影。应用场景是这样的，我们需要做一个面板来展示我们班级的同学的个人信息。我们会创建一个组件，这个组件呢用来展示信息，如下：

我们让小朋友们啊，去完善details-info组件中的信息，比如姓名啊，身高啊。然后我们在根组件中调用，就可以显示了。但是呢，有个问题。为了规范，我们需要统一的加上学校、班级等共有的信息，怎么办呢？这个时候就可以利用内容投影啦。


这样我们就把一些共有的信息，通过投影（或者叫插槽）的形式，插入到了子组件中，而ng-content标签则是告诉我们插入到哪里。看，它也没有产生dom元素。

2 多插槽

当然咯，如果需要插入多段，我们也可以在对应的标签中加上select用来辨识。如下：

箭头可能画的有些许乱，但是只有这样才能体现出这些位置都是人为指定的，嘿嘿嘿。通过select可以筛选出class和属性等，也许还有别的，可以自行探索下。

3 条件插槽

那有的小伙伴们可能会问，我不想让所有的同学都展示信息，可能有的同学家境不好，为了避免他幼小的心灵受伤，我们就不把他的信息展示出来了。那怎么办呢？这就需要用到我们的有条件的插槽，顾名思义咯。能够根据条件判断是否显示。当然，我们也可以直接在ng-content标签上用*ngif来判断显示不显示咯
但是官网上却要求我们使用ng-template，说实话，官网上的例子我研究了很久，没有研究出个所以然来。我不知道是不是翻译的问题，反正官网讲的，我个人感觉是一塌糊涂。关于ng-template，我认为还是需要好好研究下的。

4 复杂环境下的插槽
打个比方，有时候，我们需要整块整块的投影过去，如下

比如我们就想投影这一块内容。很显然，我们可以直接自定义一个属性，比如跟p标签一样的，叫question，然后在ng-content中用select选择即可。当然了，angular也提供给我们了一个起别名的方法，就是ngProjectAs=“xxx”，里面就是你起的别名，在子组件中选择就可以了，如下

总结

1 <ng-container></ng-container>其实就是个内容包裹器，它包裹的内容会显示在页面上，但是其自身是不会创建成dom标签的。
2 <ng-content></ng-content>是内容投影使用的，可以用select选择器进行选择。如果不选择，则默认投影全部
3 <ng-template></ng-template>相对比较复杂，决定另开篇章写一份。