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代码
Dec 03 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
element-ui中el-upload多文件一次性上传的实现
Dec 02 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
各种战术和打法的原创者
2020/03/04 星际争霸
理解和运用PHP中的多态性[译]
2011/08/02 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
深入理解Node module模块
2018/03/26 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
解决Django no such table: django_session的问题
2020/04/07 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
服装设计行业个人的自我评价
2013/12/20 职场文书
建筑安全生产责任书
2014/07/22 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
排查Tomcat进程假死的问题
2022/05/06 Servers