ng-template,ng-content,ng-container对比

angular主要概念:组件,模版(管道,双向绑定,输入输出等等),指令,依赖注入
template:

HTML` <template>`元素是一种用于保存客户端内容的机制,该内容在页面加载时是不可见的,但可以在运行时使用JavaScript进行实例化,可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。在渲染视图之前,Angular 会把`<ng-template>`及其内容替换为一个注释。

在ng中主要通过`viewChild TemplateRef ViewContainerRef`来实现结构性操作。

`ng-template`标签主要就是用来`加载一个模板`。使用`[ngif]=ture`或者`ngTemplateOutlet`让模板内容`渲染出来`.

angular也通过`@ViewChild(‘xxx’)greetTemplate:TemplateRef<any>`在ts里面获取dom `<ng-template #xxx>`


ng-content:

一般的`布局类`的组件,都是使用`ng-content`实现,比如`ngzorro`的`layout`组件,都可以使用`ng-content`实现。

`ng-content`有一个`select`的属性,可以选择对应的`嵌入标签的属性`,`.header`的意思就是选中`class=header`的标签填充到当前的位置,`select`的值`不能`是`动态`的。

`ng-conent`提供了`@ContentChild和@ContentChildren`来获取`ng-conent`里面包含的组件。


ng-container:

在界面上是`没有任何意义`的,在浏览器的`审查元素`中,`无法看到它`,container意思就是`容器`。只装东西,不会显示

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。