ng-template、ng-container、ng-content 的用法

ng-container：此标签不渲染成DOM；默认显示标签内部内容，也可以使用结构型指令（ngIf、ngFor...）

官网详细介绍：https://angular.cn/guide/structural-directives

eg：代码块

<ng-container><p>Hello World !!!</p>
</ng-container>

网页渲染结果

<p _ngcontent-vkg-c0="">Hello World !!!</p>

ng-content：父组件调用子组件时，将父组件内容投射到子组件指定位置（子组件中 ng-content 所在位置）；类似 VUE 中的插槽。分为默认投射，具名投射。

1）默认投射 - 子组件中只有一个 ng-content 时：eg

父组件中引入子组件

<app-child-com><p>- parent component content !!! -</p>
</app-child-com>

子组件

<p>child component content - begin</p>
<ng-content></ng-content>
<p>child component content - end</p>

显示效果

child component content - begin- parent component content !!! -child component content - end

2）具名投射 - 子组件有多个 ng-content，需要指定名字进行指定位置投射：eg

父组件内容

<app-child-com><header>header - parent component content !!! -</header><div id="demo">id selector - parent component content !!! -</div><div name="demo">name - parent component content !!! -</div>
</app-child-com>

子组件内容

<p>child component content</p>
<ng-content select="header"></ng-content>
<p>child component content</p>
<ng-content select="#demo"></ng-content>
<p>child component content</p>
<ng-content select="[name=demo]"></ng-content>

使用 select 属性，支持 CSS 选择器

ng-template：模板元素，默认情况内部元素不可见。使用方法：

方法一：使用 ngIf 属性，值为 true 显示内容

<ng-template [ngIf]="condition"><p>Hello World !!!</p>
</ng-template>

扩展：以下代码会转换为以上代码显示

<p *ngIf="condition">Hello World !!!</p>

方法二：使用 ViewContainerRef，TemplateRef，ViewChild：eg

组件 HTML

<!-- myTpl：模板引用变量；name1：模板输入变量；name：输入变量值；foo：默认输入变量 -->
<ng-template #myTpl let-name1="name" let-foo><p>调用的模板数据：{{ name1 }} -- {{ foo }} </p>
</ng-template>

组件 TS，以上代码默认不起任何作用，不会渲染 DOM

Angular8 必填 {static: boolean} 属性
true：变更检测之前解析查询结果；反之// 获取指定模板（myTpl）引用 tpl
@ViewChild('myTpl', {static: true}) tpl: TemplateRef<any>;
constructor(private viewContainer: ViewContainerRef
) { }
// $implicit：默认输入变量取值
ngOnInit() {this.viewContainer.createEmbeddedView(this.tpl, { $implicit: "Hello", name: 'World' });
}

效果，显示模板内容

方法三：使用 ngTemplateOutlet 结构型指令：eg

组件 HTML

<!-- myTpl：模板引用变量；context：输入对象数据 -->
<div><ng-container *ngTemplateOutlet="myTpl; context: context"></ng-container>
</div><!-- myTpl：模板引用变量；name1：模板输入变量；name：输入变量值；foo：默认输入变量 -->
<ng-template #myTpl let-name1="name" let-foo><p>调用的模板数据：{{ name1 }} -- {{ foo }} </p>
</ng-template>

组件 TS

context = { $implicit: "World", name: 'liyq' };

可以将指定模板插入到指定位置，TS 中只需要定义数据

方法四：使用自定义结构型指令，和 ngIf 类似：eg

1）ng g d unless 创建一个名为 unless 的结构型指令

unless.directive.ts

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';@Directive({selector: '[appUnless]'
})
export class UnlessDirective {constructor(private templateRef: TemplateRef<any>,private viewContainer: ViewContainerRef) { }// 必须使用 set 方法@Input() set appUnless(condition: boolean) {if(!condition) {// 下面是渲染模板数据的核心this.viewContainer.createEmbeddedView(this.templateRef);}}}

组件 HTML

// 模板渲染结果和 condition 的 Boolean 值没有关系，主要的作用为作为参数传递给自定义的结构指令
<ng-template [appUnless]='condition'><p>使用结构型指令调用模板</p>
</ng-template>

ng-template、ng-container、ng-content 的用法相关推荐

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 ...
html中content属性,CSS3的content属性用法详解
Content属性应该算是使用最常用的一个css属性之一吧,比如我们创建一个聊天气泡.超链接的立体翻转特效.添加图标.都要使用到content属性,当然这个属性要结合:before和:after伪类使 ...
伪元素中content的用法详解
content:""----->扩展伪元素中的content玩起来,还是有很多花里胡哨的东西,我们来看看它的一些用法吧,可能我们用的比较少,但是有时候用到的时候,简直舒服呀 ...
python中content的用法_学python吗，教你5个python现学现用的有趣用法
在我们使用python的过程中也会遇到一些有意思的用法,这里找到了一些总结有趣的话不多说,接着看下去吧!!!!python高薪就业(视频.学习路线.免费获取)shimo.im for-else用法 ...
cpp中vector动态数组（一种container）的简单用法
vector<int> num;for (int i=0; i<10; ++i)num.push_back(i);num.push_back(10);num.push_back(10 ...
Select2（4.0.6）城市搜索
实现了城市列表的前端搜索,输入汉字.拼音首字母均可搜索,前端搜索效果图 select2.js需要做改动我从本站下的,需要修改matcher方法,现在贴出代码 /*!* Select2 4.0.6-r ...
[译]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 CLI ng常用命令整理
Angular CLI 的ng命令常用整理当前对应版本:angular-cli:1.0.0 node:8.9.3 os:win32 x64 1.创建项目 ng new 命令描述 ng n ...

ng-template、ng-container、ng-content 的用法

ng-template、ng-container、ng-content 的用法相关推荐

最新文章

热门文章