ng-template、ng-container、ng-content和ngTemplateOutlet、ngProjectAs傻傻分不清！他们究竟是干啥的？？？

一句话描述5个关键词的作用：

ng-template是备胎(模板)：通常在html里面作为备用模板，当绑定了对应的#标记的时候才会显示

ng-container是舔狗(虚拟标签)：包裹的内容显示，而自身标签不会出现在html中

ng-content是替身(替代组件包裹内容、插槽)：通常出现在子组件中，用于替代父组件中><尖括号包裹的内容，并在子组件对应的ng-content位置渲染

ngTemplateOutlet是渣女的闺蜜(指向绑定的模板)：让舔狗去做备胎就做备胎，做什么样的备胎就绑定对应的ng-template引用#标记

ngProjectAs是伪装兽：把标签匿名成其他名称被ng-content的select获取

接下来就用一个综合的例子讲解这5者分别的用处

[ngTemplateOutlet]等同于*ngTemplateOutlet，以下几种写法是等效的：
<ng-container [ngTemplateOutlet]="myTemplate" ></ng-container>
<ng-container *ngTemplateOutlet="myTemplate"></ng-container>
<div [ngTemplateOutlet]="myTemplate" ></div>
<div *ngTemplateOutlet="myTemplate"></div>

ng-content就是把父组件中，插入子组件俩尖括号夹住的html内容部分替代作为一个占位符使用，这里ng-content还有一个select属性可以分节点替代类似vue插槽的功能

父组件app.component.html代码

<app-home><ng-container [ngTemplateOutlet]="myTemplate" ></ng-container><hr><ng-container *ngTemplateOutlet="myTemplate"></ng-container><h1>这是个大标题</h1><hr><h2 class="small-title">这是个小标题</h2><hr><h3 ngProjectAs="sub-title">这是个副标题</h3></app-home><!-- 模板---------------------------------------- -->
<ng-template #myTemplate><b>这里是模板文字</b>
</ng-template>

子组件app-home.component.html代码

<ng-content select='sub-title'></ng-content>
<hr>
<ng-content select='.small-title'></ng-content>
<hr>
<ng-content select='h1'></ng-content>
<br>
<ng-content></ng-content>

最终渲染出来html如下

看下图的对比关系，就明白了这几个ng标签（属性）有啥作用了

ng-template、ng-container、ng-content和ngTemplateOutlet、ngProjectAs傻傻分不清！他们究竟是干啥的？？？相关推荐

cannot bind to cxOutlet since it is not a known property of ng template
我在SAP Spartacus处于运行状态(即ng serve)始终处于运行状态时,进行代码热修改,经常遇到此类错误消息退出ng serve,重新执行即可: 更多Jerry的原创文章,尽在:&quo ...
ng build --aot 与 ng build --prod
angluar的编译有以下几种方式: ng build 常规的压缩操作代码体积最大 ng build --aot angular预编译代码体积较小 ng build --pr ...
Select2（4.0.6）城市搜索
实现了城市列表的前端搜索,输入汉字.拼音首字母均可搜索,前端搜索效果图 select2.js需要做改动我从本站下的,需要修改matcher方法,现在贴出代码 /*!* Select2 4.0.6-r ...
傻傻分不清的Manifest
在前端,说到manifest,其实是有歧义的,就我了解的情况来说,manifest可以指代下列含义: html标签的manifest属性: 离线缓存(目前已被废弃) PWA: 将Web应用程序安装到设 ...
[译]ng指令中的compile与link函数解析转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
ng命令汇总：Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装要安装Ang ...
Angular应用ng serve命令行的学习笔记
在Angular项目下执行命令行ng serve --open: The ng serve command builds the app, starts the development server, ...
ng build --prod --aot打包Angluar4项目报javaScript heap out of memory,内存溢出
这里 Allocation failed - JavaScript heap out of memory JavaScript堆内存不足,我们都知道 Node 是基于V8引擎,在一般的后端开发语言中, ...
NG Command（命令）
创建项目 ng new 项目名称创建带路由 ng new 项目名称 --routing 启动项目 ng serve -open 简写 ng serve -o 创建模块 ng g module Mod ...

ng-template、ng-container、ng-content和ngTemplateOutlet、ngProjectAs傻傻分不清！他们究竟是干啥的？？？

ng-template、ng-container、ng-content和ngTemplateOutlet、ngProjectAs傻傻分不清！他们究竟是干啥的？？？相关推荐

最新文章

热门文章