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 ...
随机推荐
- 对npm的认识
npm由三个不同的组件组成:1,网站 2.命令行界面(CLI)3.注册表 需要在网站注册 命令行界面用来进行交互 注册表来进行保存 安装本地软件包 npm install 包名 更新本地软件包 npm ...
- React Native 之 createBottomTabNavigator,createMaterialTopTabNavigator
icon第三方库 yarn add react-native-vector-icons react-native link react-native-vector-icons 在上次的代码中添加: A ...
- PHP入门培训教程 php中的时间处理
php中的时间处理 PHP入门培训教程 兄弟连PHP培训 小编整理的 php中的时间处理: <? /** * 转换为UNIX时间戳 */ function gettime($d) { if(is ...
- 好用的jQuery分页插件
插件源代码: (function ($) { $.fn.extend({ smartpaginator: function (options) { var settings = $.extend({ ...
- 【bozj2287】【[POJ Challenge]消失之物】维护多值递推
(上不了p站我要死了) Description ftiasch 有 N 个物品, 体积分别是 W1, W2, -, WN. 由于她的疏忽, 第 i 个物品丢失了. "要使用剩下的 N - 1 ...
- HDU-6705 Path
Description You have a directed weighted graph with n vertexes and m edges. The value of a path is t ...
- R 动态定义变量名 assign
rm(list=ls()) library(GSVA) library(GSEABase) library(GSVAdata) library(msigdbr) library(org.Hs.eg.d ...
- 【转】i18n实现前端国际化(实例)
源地址:https://www.jianshu.com/p/ea93efef5155 i18n实现前端国际化(实例) 0.1442018.08.27 16:25:10字数 246阅读 10563 在今 ...
- 《Vue前端开发手册》
序言 为了统一前端的技术栈问题,技术开发二部规定开发技术必须以Vue为主. 为了更好的规范公司的前端框架,现以我前端架构师为主,编写以下开发规范,如有不当的地方,欢迎批评教育并慢慢改善该开发文档,谢谢 ...
- Apache2.4常用编译参数
转载文章,亲试 Apache2.4以后的版本编译依赖apr,所以,编译之前需要先安装apr及apr-util. 编译参数只是一个参考作用,这个参数是我平常使用的,具体工作中的需求还是要区别对待的 一些 ...