angularjs|ng-template用法 angularjs|前端

ng-template 【angularjs|ng-template用法】是一个Angular元素，用来渲染HTML，它不会直接展示在页面上，需要通过结构型指令将内容渲染到页面中。
在我们日常开发中见到的结构型指令，如 *ngIf，ngFor 是一个微语法，解开之后会变成标签。在介绍之前我们下看一下ngIf解开语法糖，会是怎样的一个结构
*ngIf

{{hero.name}} {{hero.name}}

*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, 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

(A) < ng-template [appUnless]="condition">

用法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