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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
jQuery bind事件使用详解
May 05 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
vue实现淘宝购物车功能
Apr 20 Javascript
google广告之另类js调用实现代码
Aug 22 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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
基于python实现简单日历
2018/07/28 Python
详解Python with/as使用说明
2018/12/13 Python
Python time库基本使用方法分析
2019/12/13 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
《手指教学》反思
2014/02/14 职场文书
市场营销求职信范文
2014/02/21 职场文书
《散步》教学反思
2014/03/02 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
质量整改通知单
2015/04/21 职场文书
风之谷观后感
2015/06/11 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
新年祝酒词大全
2015/08/11 职场文书