angular组件开发之-ng-content，contentChild,ng-container,ng-templeate,viewChild详解-第一篇

ng-content

是angular提供的一个指令，当我们想封装一个组件，并且希望组件展示的内容可以由用户自定义的时候，ng-content便要上场了。
举个例子，比如我们做了一个通用组件叫alert,使用时候在模板中是这样的:对吧，那如果11111这样呢，如果alert组件内部没有处理要去显示111，那么这个111永远不会显示.
所以ng-content就是处理111的。

现在，我们要实现边框红色的容器组件，因为在系统中这个经常用到，所以我们要封装它，做成可复用的sharedComponent。

1: father.component.ts

import {Component} from '@angular/core';
    @Component({
        selector:'app-father',
        template:`
                

                    
标题
                    

                       内容
                    
                    
底部
                  
 
                `
    })
    export class AppFather {
        
    }

2.app.component.html中使用

可以看到，现在我们封装的app-father是死的，也就是标题、内容、底部，都写死了，而我们的需求是这些内容都可以通过使用者自定义。怎么搞？这个时候就可以用到了。我理解它有点像react提供的props.children，官方说它是投影内容，其实就是把你模板中包含在组件里的内容给放进来展示。接着看

全部投影

3.修改father.component.ts
在section标签内使用

4.修改app.component.html，修改使用father组件的方法

5.展示如下:

看到了吧，ngcontent就是组件选择器内包裹的内容，上面这个例子就是把app-father标签里的内容放到section下显示。

选择性投影

6.ngcontent也可以选择性来显示，就是说我可以挑选你包裹的内容，接着看，我们在app-father的模板中添加了3个ng-content，分别添加了属性select。select从字面理解就是我要选择的是什么，可以传入标签名，比如header，也可以传入css选择器。

7.使用,当ngcontent没有指定select的时候，它会显示剩余的内容

显示如下：

ngProjectAs

现在我们知道通过 ng-content 的 select 属性可以指定外部内容投射到指定的 中。

而要能正确的根据 select 属性投射内容，有个限制就是 - 不管是 标签 header、section这几个标签都是作为 组件标签 的直接子节点。

那如果不是作为直接子节点，会是什么情况呢？我们简单修改下引用app.component.html的代码，将 标签header 放在一个div中，修改如下：

显示:

为了解决这个问题，我们必须使用 ngProjectAs 属性，它可以应用于任何元素上。具体如下：

是不是OK了。第一篇就这样。