angular2 - content projection-
angular2中的内容映射:
App.component:
<my-day>
<my-lucky> </my-lucky>
</my-day>
MyDay.component:
selector:'my-day'
template`<h1>my day </h1>
<ng-content></ng-content>
`
MyLucky.component:
selector:'my-lucky',
template:'<p>One fine day</p> '
MyLucky中的内容就会映射到MyDayComponent的'ng-content'标签内;
@ContentChildren(MyLuckyComponent):;MYDay通过它访问;
------------------------------------------
ng-content
ng-content拥有一个select属性,允许选择性地加载组件。但必须保证,所供选择的组件都放在<my-day></my-day>内部。
:
<ng-content select='[one]'></ng-content> //按属性选择 ;;可以提供属性值:select='[one=*]',按属性值来加载。
选择:<my-lucky one> </my-lucky> 选择具有one属性的;
<ng-content select='my-lucky'></ng-content>//按标签选择
选择:<my-lucky></my-lucky>
<ng-content select='.class1'></ng-content>//按CSS选择;
选择:<div class='class1'></div>
在设置了select属性后,可允许一个组件内拥有多个ng-content,各自按须加载。
------------------------------------------------------
可惜ng-content select无法进行动态加载。
<ng-content select='{{selected}}'> 不行。
<my-lucky [one]='visibility.lucky'> 不行。
<my-lucky one='{{visibility.lucky}}'>不行。
好吧,我是这样的:
<my-day>
<my-lucky *ngIf='visibility.lucky'></my-lucky>
<my-wonderfull *ngIf='visibility.wonderfull'></my-wonderfull>
</my-day> <ng-content> </ng-content> //不写任何属性。
refer:https://scotch.io/tutorials/angular-2-transclusion-using-ng-content
我的Github例子:https://github.com/zhantewei2/Ionic2-example-notes/tree/master/pages/testSegment
angular2 - content projection-的更多相关文章
- [Angular] Learn Angular Multi-Slot Content Projection
Now for au-modal component, we pass in tow component though contenct projection: <au-modal class= ...
- [Angular] Configurable Angular Components - Content Projection and Input Templates
We are going to have a modal component: <au-modal > </au-modal> And we can pass default ...
- [Angular 2] Share Template Content In Another Template With Content Projection <ng-content>
Angular 1 provided a mechanism to place content from your template inside of another template called ...
- [Angular] Content Projection with ng-content
For example there is tow form compoennts on the page, and what we want to do is reusing the form com ...
- Angular2.0的项目架构
Angular2.0的项目架构 一.项目服务端app a) Controller控制器 b) Router路由 c) Service服务 d) Public公共样式及脚本和图片等静态资源 e) Vie ...
- C#版的mongodb最新的官方驱动2.4.0版本
已经升级了mongodb至最新的3.4的版本,我想想也该把驱动升到最新的了,我用的驱动还是1.7的版本呢,之前几次想升级,都是因为升级驱动需要改动的代码太大了,升级的成本很高,所以懒得动,就这么的用了 ...
- Angular:利用内容投射向组件输入ngForOf模板
现在,我们写一个组件puppiesListCmp,用于显示小狗狗的列表: //puppies-list.component.ts @Component({ selector: 'puppies-lis ...
- angular5 @viewChild @ContentChild ElementRef renderer2
@viewChild 作用一:选择组件内节点 <!--视图 --> <div #mydiv><input></div> // 选择 @ViewChild ...
- Angular4学习笔记(八)- ng-content
内容投影 ng-content ng-content是一个占位符,有些类似于router-outlet. 以前举の例子,父组件包含子组件都是直接指明子组件的selector,比如子组件的selecto ...
随机推荐
- 7个步骤:让JavaScript变得更好
Dan Odell介绍了他编写的七步写出无瑕代码的计划,是在简化过程中最有用的工具. 随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加.然 ...
- Crowd 2.7汉化中文包(原创首发)
介绍:Crowd是用来集成Atlassian各类产品用户集成系统,如Jira,Confluence等的集中用户管理平台.可对组.成员关系.用户.目录.应用程序及权限进行综合管理,并可实现其他程序的单点 ...
- uboot mmc烧写命令
mmc write addr blk# cnt 这个命令的作用是将内存上的数据写入mmc中 参数: addr: 从内存读取的位置 blk: 写入到mmc中block位置,这个位置是mmc的0地址的偏移 ...
- oracle中dual的使用
dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下:1.查看当前用户,可以在 SQL Plus中执行下面语句select ...
- as3 中文转拼音
private static const PinYin:Object = {"a":"\u554a\u963f\u9515","ai":&q ...
- MySQL workbench 中文乱码 显示口口
Edit-->perference...-->Apperance 如下图 即可 转载自:http://blog.csdn.net/shxluwei/article/details/802 ...
- Android手机无法访问百度空间的解决办法
本文网址:http://www.cnblogs.com/tunnel213/p/4301165.html 现象: 百度“JavaScript函数高级”后找到一篇文章,百度空间的,无法查看: 配置: 三 ...
- jquery实现css3动画
jquery animate改变元素样式时,只支持数字值的变化,比如width,height等,但是css3属性状态值很多都不是数字值,而是字符串和数字混合在一起,比如translate(), rot ...
- asp.net微信jsapi支付
1.前台页面: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head ru ...
- 通过a++来理解闭包改变作用域的问题
纯属个人理解,如果有误请指出! 让我们先看一段代码 function dog(){ var a=100; a++; return a; } alert(dog()); alert(dog()); 我们 ...