Angular ngTemplateOutlet
虽然我们可以通过使用 ViewContainerRef 将 ElementRef创建的视图插入指定的位置,但是仍然希望有某中快捷的方式帮我们实现。
ngTemplateOutlet与ngComponentOutlet 就是帮我们干这事的。
ngTemplateOutlet
插入 ng-template 创建的内嵌视图。
最简单的例子如下:
<div *ngTemplateOutlet="tpl1"></div>
<ng-template #tpl1>
<span>I am span in template {{title}}</span>
</ng-template>
按照官方文档,其语法知识如下: *ngTemplateOutlet = "templateRefExp; content: contentExp "
templateRefExp: ng-template 元素的#ID
contextExp:
1、可空参数;
2、可以在模版中使用 let-key 语句进行绑定; 这个key,是我们在HTML模版绑定显示的key,即 {{key}} 。
3、使用 $implicit 这个key会把对应的值设置为默认值;
因为我们会为content指定一个对象,每个对象可能有一个或多个值;
如果这个对象,是一个值,则不需显示指定名称,如 student : { name: 'jack' } ,可以用 student: { $implicit: 'jack' };
在 ng-template 中也不必使用 let-showName = "name", 只需要 let-showName 即可。
如下例子:
HTML文件:
<ng-container *ngTemplateOutlet="tplStu; context: student"></ng-container>
<ng-template #tplStu let-name let-ageHTML="age">hello {{name}},your age is {{ageHTML}}</ng-template> .ts文件 student = { $implicit: 'jack' , age: '19'};
Angular ngTemplateOutlet的更多相关文章
- [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component
Components with slots can expose their data by passing it into the slot and exposing the data using ...
- [Angular] Using ngTemplateOutlet to create dynamic template
I can use <tamplete> syntax and a entry component as a container to create a dynamic component ...
- [Angular] Angular Advanced Features - ng-template , ng-container, ngTemplateOutlet
Previously we have tab-panel template defined like this: <ul class="tab-panel-buttons" ...
- [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)
Here is the defulat tab header template: <ng-template #defaultTabHeader let-tabs="tabsX" ...
- Angular 向组件传递模板的几种方法
最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时 ...
- Angular开发实践(八): 使用ng-content进行组件内容投射
在Angular中,组件属于特殊的指令,它的特殊之处在于它有自己的模板(html)和样式(css).因此使用组件可以使我们的代码具有强解耦.可复用.易扩展等特性.通常的组件定义如下: demo.com ...
- Angular动态创建组件之Portals
这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...
- Angular开发技巧
由于之前有幸去参加了ngChina2018开发者大会,听了will保哥分享了Angular开发技巧,自己接触Angular也有差不多快一年的时间了,所以打算对Angular开发中的一些技巧做一个整理 ...
- Angular 4+ 修仙之路
Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...
随机推荐
- Top 8 Diagrams for Understanding Java
Reference: http://www.programcreek.com/2013/09/top-8-diagrams-for-understanding-java/ A diagram is s ...
- A1065
判断两数相加是否大于第三数,大于输出true,否则输出false(相等也是false) 1 需要注意数字溢出的问题: 2 先判断溢出,因为在a,b都是负数最小值的情况下,相加直接是正数,在c较小的时候 ...
- pytest-生成测试报告
import pytest """ 使用pytest编写用例,必须遵守以下规则: (1)测试文件名必须以"test_"开头或者"_test& ...
- awk基础学习
2019-12-20 需要巧记,很多格式,学习难度:grep.sed.awk awk知识概述 1三剑客awk命令介绍2三剑客awk命令执行原理语法结构3三剑客awk命令实操练习查询替换信息排除(取反) ...
- 错误: 找不到或无法加载主类 org.sang.BlogserverApplication
错误: 找不到或无法加载主类 org.sang.BlogserverApplication
- mysql WHERE语句 语法
mysql WHERE语句 语法 作用:如需有条件地从表中选取数据,可将 WHERE 子句添加到 SELECT 语句.珠海大理石平尺 语法:SELECT 列名称 FROM 表名称 WHERE 列 运算 ...
- jQuery 遍历 - 同胞(siblings)
同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历: siblings() next() ...
- 树状数组板子 x
树状数组! 参考 http://www.cnblogs.com/zzyh/p/6992148.html 洛谷 P3374 [模板]树状数组 1 题目描述 如题,已知一个数列,你需要进行下面两种操作: ...
- HDU 6614 AND Minimum Spanning
Time limit 1000 ms Memory limit 131072 kB OS Windows 中文题意 给一张n个点的无向完全图(输入一个n就完事了),每个点标号为1~n,每条边的边权为它 ...
- 电脑新安装JDK版本并运行使用该JDK版本问题
情景:电脑上已正常安装一个jdk版本,如:1.7.0_71,因考虑到一些情况,现需要使用版本为1.7.0_80(1.8),故需新安装JDK,并使服务可以运行使用新安装的JDK版本. 网络找寻方法: ( ...