详解Angular 自定义结构指令
时间:2019-03-30
本文章向大家介绍详解Angular 自定义结构指令,主要包括详解Angular 自定义结构指令使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. <ng-template>元素
import { Component, TemplateRef, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-code404', template: ` <!-- 这里使用一个模板变量,在组件中使用@ViewChild装饰器获取模板元素--> <ng-template #tpl> Big Keriy ! </ng-template> `, }) export class Code404Component implements AfterViewInit{ // @ViewChild 装饰器获取模板元素 @ViewChild('tpl') tplRef: TemplateRef<any>; constructor(private vcRef: ViewContainerRef) {} ngAfterViewInit() { // 使用ViewContainerRef对象的createEmbeddedView方法创建内嵌视图。 this.vcRef.createEmbeddedView(this.tplRef); } }
这样其实我们在视图中就得到了一个什么...啊,就是一个'Big Keriy !'的字符串。
2. ngTemplateOutlet指令
a. ngTemplateOutlet
和routerOutlet是一个意思,将视图(<ng-template>标签中的内容)放到对应的ngTemplateoutlet下面。
import { Component } from '@angular/core'; @Component({ selector: 'app-code404', template: ` <ng-template #stpl> Hello, Semlinker! </ng-template> <ng-template #atpl> Big Keriy ! </ng-template> <div [ngTemplateOutlet]="atpl"></div> <div [ngTemplateOutlet]="stpl"></div> `, }) export class Code404Component { }
最终的视图应该是:
Big Keriy !
Hello, Semlinker!
b. ngOutletContex
看名字就知道意思。
ngTemplateOutlet指令基于TemplateRef对象,在使用ngTemplateOutlet指令时,可以通过ngTemplateOutletContext属性来设置来设置EmbeddedViewRef的上下文对象。可以使用let语法来声明绑定上下文对象属性名。
import { Component, TemplateRef, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-code404', template: ` <!-- 这里的messagey映射到下面context中message 再使用插值表达式的方式显示message的值 --> <ng-template #stpl let-message="message"> <p>{{message}}</p> </ng-template> <!-- 这里的messagey映射到下面context中message , let-msg是一种与语法糖的方式变量名是msg--> <ng-template #atpl let-msg="message"> <p>{{msg}}</p> </ng-template> <!-- 若不指定变量值那么将显示 $implicit 的值--> <ng-template #otpl let-msg> <p>{{msg}}</p> </ng-template> <div [ngTemplateOutlet]="atpl" // 这里ngOutletContext绑定的是context对象 [ngOutletContext]="context"> </div> <div [ngTemplateOutlet]="stpl" [ngOutletContext]="context"> </div> <div [ngTemplateOutlet]="otpl" [ngOutletContext]="context"> </div> `, }) export class Code404Component implements AfterViewInit{ @ViewChild('tpl') tplRef: TemplateRef<any>; constructor(private vcRef: ViewContainerRef) {} ngAfterViewInit() { this.vcRef.createEmbeddedView(this.tplRef); } context = { message: 'Hello ngOutletContext!', $implicit: 'great, Semlinker!' }; // 这里的$implicit是固定写法 }
先看输出的视图:
Hello ngOutletContext!
Hello ngOutletContext!
Hello, Semlinker!
3. ngComponentOutlet指令
听着名字就很爽,这不是插入视图的,是插入组件的!
该指令使用声明的方式,动态加载组件。
先写组件,里面有两个。。组件:
@Component({ selector: 'alert-success', template: ` <p>Alert success</p> `, }) export class AlertSuccessComponent { } @Component({ selector: 'alert-danger', template: ` <p>Alert danger</p> `, }) export class AlertDangerComponent { } @Component({ selector: 'my-app', template: ` <h1>Angular version 4</h1> <ng-container *ngComponentOutlet="alert"></ng-container> <button (click)="changeComponent()">Change component</button> `, }) export class AppComponent { alert = AlertSuccessComponent; changeComponent() { this.alert = AlertDangerComponent; } }
当然,还需要在模块中声明入口:
// app.module.ts @NgModule({ // ... declarations: [ AppComponent, SignUpComponent, AlertSuccessComponent, AlertDangerComponent ], entryComponents: [ // 这里面写指令中呀用到的组件 AlertSuccessComponent, AlertDangerComponent ], // ... })
这样就可以使用ngComponentOutlet指令来插入组件玩耍了:
<!-- 简单语法 --> <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container> <!-- 完整语法 --> <ng-container *ngComponentOutlet="componentTypeExpression; injector: injectorExpression; content: contentNodesExpression;"> </ng-container>
这是一个完整语法简单的例子:
// ... @Component({ selector: 'ng-component-outlet-complete-example', template: ` <ng-container *ngComponentOutlet="CompleteComponent; injector: myInjector; content: myContent"></ng-container>` }) class NgTemplateOutletCompleteExample { // This field is necessary to expose CompleteComponent to the template. CompleteComponent = CompleteComponent; myInjector: Injector; myContent = [[document.createTextNode('Ahoj')], [document.createTextNode('Svet')]]; constructor(injector: Injector) { this.myInjector = ReflectiveInjector.resolveAndCreate([Greeter], injector); } }
4. 创建结构指令
也想不出来一个什么好例子,抄一个例子过来:
// uless.directive.ts import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[exeUnless]' }) export class UnlessDirective { @Input('exeUnless') set condition(newCondition: boolean) { // set condition if (!newCondition) { this.viewContainer.createEmbeddedView(this.templateRef); } else { this.viewContainer.clear(); } } constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { } } import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2 *exeUnless="condition">Hello, Semlinker!</h2> `, }) export class AppComponent { condition: boolean = false; } // app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2 *exeUnless="condition">Hello, Semlinker!</h2> `, }) export class AppComponent { condition: boolean = false; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 微信新出了逆天功能,或许你用得上
- 网站系统架构梳理-解决高负载高并发
- silverlight 相册雏型
- Mysql优化系列(1)--Innodb引擎下mysql自身配置优化
- 一台服务器多实例mysql做主从复制
- spring AOP日志管理
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- UNIX 高手的 10 个习惯
- linux下截取给定路径中的目录部分
- 一年坎坷也曾怀疑自己,如今五冠在手的柯洁将再战AI
- 从MapX到MapXtreme2004[3]-搜索图元Feature
- git push上传代码到gitlab上,报错401/403(或需要输入用户名和密码)
- mysql下mysqladmin日常管理命令总结
- Ubuntu下SVN安装和配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一文搞定选择排序算法
- 一文搞定冒泡排序算法
- 剑指Offer LeetCode 面试题25. 合并两个排序的链表
- LeetCode 20200601 打卡 1431. 拥有最多糖果的孩子
- 剑指Offer LeetCode 面试题24. 反转链表
- 剑指Offer LeetCode 面试题22. 链表中倒数第k个节点
- 剑指Offer LeetCode 面试题18. 删除链表的节点
- 剑指Offer LeetCode 面试题06. 从尾到头打印链表
- 最详细的docker中安装并配置redis
- 剑指Offer LeetCode 面试题59 - I. 滑动窗口的最大
- 剑指Offer LeetCode 面试题58 - II. 左旋转字符串
- 剑指Offer LeetCode 面试题58 - I. 翻转单词顺序
- 剑指Offer LeetCode 面试题56 - II. 数组中数字出现的次数 II
- 站在软件工程的角度重新思考面向对象(含高清图谱)
- 剑指Offer LeetCode 面试题57. 和为s的两个数字