【精】ng-template的深入浅出

说明

本文旨在帮助初学者更好的理解angular中模版的使用方法。

内容

概念解析

ng-template 指令代表一个 Angular 模板：这意味着该标签的内容将包含模板的一部分，然后可以将其与其他模板组合在一起以形成最终的组件模板。

应用场景

我们经常在动态组件中使用到模版，比如一个弹出框，弹出框里的内容是不同的，但是框体的外部是一样的，比如头部，关闭按钮，确定和取消按钮等。

案例分析

1 模版包裹的内容默认是不显示的，一般通过ngIf去判断是否渲染出来


2 模版变量的使用，我们可以在模版上，通过#的方式，定义一个模版变量，这个模版变量可以在html中去使用。如下所示，下面有一个微语法*ngIf="myname =='xiaoming' else loading"
意思就是，定义的变量myname等于xiaoming时，就显示ng-container里的内容，否则就显示模版loading中的内容


3 模版的动态创建。我们写了一个模版，可以指定模版在哪里进行显示

这里呢，需要给大家解释下，首先，<ng-template #loading>loading....{{context}}++++{{context1}}</ng-template>这段代码定义了一个模版，模版名称叫loading，里面显示的内容是loading....{{context}}++++{{context1}}其中context和context1是两个变量。下面的代码，这句<ng-template [ngTemplateOutlet]="loading" [ngOutletContext]="context"></ng-template>意思就是上面定义的loading模版，在我这展示，通过ngTemplateOutlet实现的，然后传context参数进去。下面的div标签里是另一种写法，效果是一样的。

4 输入变量的使用，就是我们如何向模版中传入变量参数。在3小节中，我们可以通过[ngOutletContext]的形式传参到模版中。我们也可以通过通过let-xxx= “property” 表达式去定义context局部变量的key 然后再在内部调用。如下

也就是通过let-xxx去自定义传过来属性的名称

5 模版变量在类中的使用；就是我们定义的模版变量，如何在我们的代码中去使用，我们可以通过viewChild去完成。

这样我们就拿到了这个变量了

总结

ng-template的简单用法大概如此了。更多比较深入的用法，就会涉及到指令的学习了。指令是用来优化dom元素的。等具体用到时，在进行补充