ngzorro html源码,Angular 中 ngTemplateOutlet 的用法以及ng-zorro源码分析！

一、引言

今天看到文章：https://segmentfault.com/a/1190000015944548 。于是专门研究一下ngTemplateOutlet用法！！！！

官方定义 ：

NgTemplateOutlet： 它是结构指令，根据一个提前备好的插入一个内嵌视图。 你可以通过设置来给附加一个上下文对象。是一个对象，该对象的 key 可在模板中使用let语句进行绑定。

示例： 

*我测试：  都可承载这个指令, 但不支持

这样的标签，提示：

使用目的

需要要自定义标题或页脚的内容。

比如编写弹窗组件，不建议在组件模板中写死标题和页脚的内容，当在页面上使用该组件时， 页面可以动态向指定组件内占位传入“一些内容”，组件会把它们插入到它想要的地方！

比如ng-zorro中，也大量这样用法，https://ng.ant.design/components/card/zh#components-card-demo-simple

二、组件自定义输入内容

比如在一个页面上，引用nz-card时，把主页面上内容插入到nz-card中去，文档上示例代码：

如果要编写这样的组件，需要考虑几个问题，

1、如何引用主页面上的一个模板元素   ( 使用本地变量 #，我记得以前官方文档叫“局部模版变量"或“模板引用变量”)

2、引用的变量如何传递给子组件中      (子组件定义@Input  ，使用类型为TemplateRef的变量接收)

3、子组件如何使用这个引用变量          ( 在模版中，用ngTemplateOutlet  绑定这个变量即可)

4、引用的模板元素从主页面上来，  如何把子组件的数据(即子组件中上下文)传递给这个引用元素上来？(向ngTemplateOutlet 传入 context: myCo