angular6.x中ngTemplateOutlet指令的使用示例


Posted in Javascript onAugust 09, 2018

在使用angular进行开发的时候,通过属性绑定向组件内部传值的方式,有时候并不能完全满足需求,比如我们写了一个公共组件,但是某个模板使用这个公共组件的时候,需要在其内部添加一些标签内容,这种情况下,除了使用ngIf/ngSwitch预先在组件内部定义之外,就可以利用ngTemplateOutlet指令向组件传入内容.

ngTemplateOutlet指令类似于angularjs中的ng-transclude,vuejs中的slot.

ngTemplateOutlet是结构型指令,需要绑定一个TemplateRef类型的实例.

使用方式如下:

@Component({
 selector: 'app',
 template: `
  <h1>Angular's template outlet and lifecycle example</h1>
  <app-content [templateRef]="nestedComponentRef"></app-content>
  <ng-template #nestedComponentRef let-name>
   <span>Hello {{name}}!</span>
   <app-nested-component></app-nested-component>
  </ng-template>
 `,
})
export class App {}
@Component({
 selector: 'app-content',
 template: `
  <button (click)="display = !display">Toggle content</button>
  <template 
    *ngIf="display" 
    *ngTemplateOutlet="templateRef context: myContext">
  </template>
 `,
})
export class Content {
 display = false;
 @Input() templateRef: TemplateRef;
 myContext = {$implicit: 'World', localSk: 'Svet'};
}
@Component({
 selector: 'app-nested-component',
 template: `
  <b>Hello World!</b>
 `,
})
export class NestedComponent implements OnDestroy, OnInit {
 
 ngOnInit() {
  alert('app-nested-component initialized!');
 }
 
 ngOnDestroy() {
  alert('app-nested-component destroyed!');
 }
 
}

代码中除了跟组件外定义了两个组件

  1. 容器组件:app-content
  2. 传递进去的内容组件:app-nested-component

app-content组件接收一个TemplateRef类型的输入属性templateRef,并在模板中将其绑定到了ngTemplateOutlet指令,当组件接收到templateRef属性时,就会将其渲染到ngTemplateOutlet指令所在的位置.

上例中,app-content组件templateRef属性的来源,是在根组件的模板内,直接通过#符号获取到了app-nested-component组件所在<ng-template>的引用并传入的.

在实际应用中,除了这种方式,也可以直接在组件内部获取TemplateRef类型的属性并绑定到ngTemplateOutlet指令.

比如在容器组件为模态框的情况下,并不能通过模板传值,就可以使用下面这种方式:

@ViewChild('temp') temp: TemplateRef<any>

 openDialog(){
  this.dialog.open(ViewDialogComponent, {data: this.temp)
 }

在容器组件中还可以定义被传递内容的上下文(上例app-content组件中的myContext属性),其中的$implicit属性作为默认值,在被传递的内容中可以以重命名的方式访问(上例let-name),对于上下文中其他的属性,就需要通过let-属性名的方式访问了.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
js操作数组函数实例小结
Dec 10 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
koa上传excel文件并解析的实现方法
Aug 09 #Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 #Javascript
vue-cli初始化项目中使用less的方法
Aug 09 #Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 #Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 #Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 #Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 #Javascript
You might like
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
jQuery的一些注意
2006/12/06 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
python实现飞机大战
2018/09/11 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
django自定义模板标签过程解析
2019/12/14 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
delegate与普通函数的区别
2014/01/22 面试题
文明家庭先进事迹材
2014/01/27 职场文书
个人自我评价范文
2014/02/05 职场文书
安全生产标语
2014/06/06 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
给老婆的检讨书
2015/01/27 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
经典爱情感言
2015/08/03 职场文书
成人成长感言如何写?
2019/08/16 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python