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系列(50):Function模式(下篇)
Mar 04 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
jQuery事件对象总结
Oct 17 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 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 ftp文件上传函数(基础版)
2010/06/03 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
xtree.js 代码
2007/03/13 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
JQuery跳出each循环的方法
2015/04/16 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
初学python数组的处理代码
2011/01/04 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Python如何实现定时器功能
2020/05/28 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
2014全国两会心得体会
2014/03/17 职场文书
2019个人半年工作总结
2019/06/21 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
Pandas 稀疏数据结构的实现
2021/07/25 Python