angular2+ ng-content浅谈

        angular2+中的的内容映射使用的是ng-content指令，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件。下面用例子来解释一下ng-content的用法:

App.component.ts

< parent-content >

< child-content ></ child-content >

</ parent-content >

可以把被包含的组件称为子组件，外层称为父组件。我们看下父组件怎么写的:
parent.component.ts

selector: 'parent-content'

template: `<h1>this is parent-content </h1>

<ng-content></ng-content>`

再看下子组件是怎么写的：
child.component.ts

selector: 'child-content',

template: '<p>this is child-content</p> '

这样子组件child.component.ts的内容就会映射到parent.component.ts的“ng-content”中去，此时，如果我们想访问或者操作子组件中的方法或属性，可以通过下面的方式去访问：
@ContentChildren(childComponent)child;(contentChildren和viewChildren还是有区别的，别搞混了)。
         另外：ng-content还有一个属性，就是select，这里的select有什么用呢。主要作用是能够选择行的选择要映射的组件，但是可供选择的组件必须包含在父组件内部，这里的选择有三种选择方式，分别是：属性、标签、CSS，下面咱们看下具体的使用方法：
1.属性选择

< ng-content select= "[first]" ></ ng-content >

再看下父组件内部：

< parent-content >

< child-content first > </ child-content >

< child-content second > </ child-content >

</ parent-content >

这里选择映射的就是具有first属性的子组件 

2.标签选择

< ng-content select= "child-content1" ></ ng-content >

再看下父组件内部：

< parent-content >

< child-content1 ></ child-content1 >

< child-content2 ></ child-content2 >

</ parent-content >

这里选择映射的就是标签名称为"child-content1"的子组件
3.CSS选择

< ng-content select= ".myChild" ></ ng-content >

再看下父组件内部：

< parent-content >

< child-content1 class= "myChild" ></ child-content1 >

< child-content2 ></ child-content2 >

</ parent-content >

这里选择映射的就是类名为"myChild"的子组件
这里要说明一下，select的值不能设置成动态的，动态的值会导致无法正常映射组件.

说到这里，不得不说一下一个属性ngProjectAs，这个属性是用来干什么的呢？我们来看一下：

我们将子组件包装在<ng-container>这个容器中，并使用select属性进行选择映射，运行程序后看下结果：

parent.component.ts

< div style= "border:1px solid red" >

< ng-content ></ ng-content >

</ div >

< div style= "border:1px solid blue;margin-top:10px" >

< ng-content select= "child-content" ></ ng-content >

</ div >

App.component.ts

< parent-content >

< ng-container >

< child-content ></ child-content >

</ ng-container >

</ parent-content >

此时我们发现，子组件只映射到了红色的div中，蓝色div中的子组件并没有映射出来，这是因为<ng-container>不在匹配select="child-content"，这里说下<ng-container>，这只是一个特殊的标签，有点类似于template，Angular复用了HTML5规范中template 的tag的语义，不过并没有真正利用其实现，因此在审查元素中是永远也找不到一个template元素的。 不过，由于ng-container并不是HTML5中的，为了保持区分度，采用了ng-作为前缀。言归正传，要解决这个问题，就得利用ngProjectAs这个属性，

< parent-content >

< ng-container ngProjectAs= "child-content" >

< child-content ></ child-content >

</ ng-container >

</ parent-content >

此时发现蓝色div中映射了子组件。就解决了这个问题。