ng-template

<ng-template>是一个Angular元素，用来渲染HTML，它不会直接展示在页面上，需要通过结构型指令将内容渲染到页面中。

在我们日常开发中见到的结构型指令，如 *ngIf，ngFor 是一个微语法，解开之后会变成 <ng-template>标签。在介绍<ng-template>之前我们下看一下ngIf解开语法糖，会是怎样的一个结构

*ngIf

<div *ngIf="hero" class="name">{{hero.name}}</div><!-- *ngIf翻译成ng-template元素之后 -->
<ng-template [ngIf]="hero"><div class="name">{{hero.name}}</div>
</ng-template>

*ngIf变成属性型指令，并绑定在ng-template元素上
*ngIf的宿主元素被包含在ng-template元素内

ng-template用法

用法1

利用指令插入模板

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';@Directive({ selector: '[appUnless]' })
export class UnlessDirective {constructor(private templateRef: TemplateRef<any>,private viewContainer: ViewContainerRef) { }@Input() set appUnless(condition: boolean) {if (!condition) {// 容器内插入模板this.viewContainer.createEmbeddedView(this.templateRef);}else {// 清除容器内模板this.viewContainer.clear();}}
}

app.component.ts

import { Component, ViewChild, OnInit } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: []
})
export class AppComponent {condition = true;
}

app.component.html

<button (click)="condition = !condition">toggle</button><div *appUnless="condition"></div><ng-template [appUnless]="condition"><p class="code unless">(A) &lt;ng-template [appUnless]="condition"&gt;</p>
</ng-template>

用法2

使用ViewContainerRef操作DOM

import { Component, ViewContainerRef, OnInit, ViewChild, ElementRef } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
// $implicit 使用默认值context = { $implicit: 'World', name: 'liyq' }@ViewChild('myTpl') tpl: ElementRef;constructor(private vr: ViewContainerRef) { }ngOnInit() {// 实例化一个内嵌视图，并把它插入到该容器中。this.vr.createEmbeddedView(this.tpl, { name: 'nihao' });this.vr.get(0);// this.vr.clear();}
}

app.component.html


<ng-container *ngTemplateOutlet="myTpl; context: context"></ng-container><ng-template #myTpl let-name="name"><h2>this is myTpl {{ name }}</h2>
</ng-template>

结果展示

ng-template相关推荐

cannot bind to cxOutlet since it is not a known property of ng template
我在SAP Spartacus处于运行状态(即ng serve)始终处于运行状态时,进行代码热修改,经常遇到此类错误消息退出ng serve,重新执行即可: 更多Jerry的原创文章,尽在:&quo ...
必须正确理解的---ng指令中的compile与link函数解析
这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...
NG客制项目下的I18n国际化标准方案
方案选择国际化i18n 这个方案是最成熟的,同时也是官方的方案,但是这样一个标准化的方案同时意味着灵活度不够.当需要划分feature module,需要客制化组件的时候,这个方案的实施的成本就 ...
[译]ng指令中的compile与link函数解析转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
ng bootstrap css,Angular2学习笔记-ng bootstrap中motal组件使用
ng bootstrap是一个angular UI bootstrap库,里面包含了一些基本的UI组件(日期选择组件,按钮,下拉框等).目前的版本为v1.0.0-alpha.14,基于angular2 ...
微信小程序模板template
上面是官方的讲解, 主要是方便在不同的地方调用. 下面自己说下使用, 先创建一个模板名字是自己随便取的, 在template.wxml中填写模板最外层用template标签设置一个name属性 & ...
ng new ng-pro 报错(创建angular6项目报错)
1.安装nodejs D:\develop\nodejs 2.配置node npm环境变量,npm本地仓库指向自定义目录原npm仓库位置C:\Users\Administrator\AppData ...
C++中模板template typename T
template <typename Dtype>. 网上解释的非常多,觉得比较啰嗦,其实就是一个类型模板. 比如我们要计算两个数的加法,针对不同类型可能需要设计不同类型的函数,那么tem ...
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录一键生成SCSS/LESS结构，敏捷开发必备插件！！！
Ctrl+Shift+X 搜索AutoScssStruct4Vue 如上图直接右键-autoScssStruct(你都不需要聚焦到template节点) 直接就给你妥妥的把SCSS代码写好了,如果 ...
ng命令汇总：Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装要安装Ang ...

ng-template

ng-template

*ngIf

ng-template用法

ng-template相关推荐

最新文章

热门文章