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 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
在Vue中使用HOC模式的实现
Aug 23 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 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
python调用cmd复制文件代码分享
2013/12/27 Python
Python入门篇之文件
2014/10/20 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
网上卖盒饭创业计划书范文
2014/02/07 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2015大学迎新标语
2015/07/16 职场文书
mysql函数全面总结
2021/11/11 MySQL