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-的更多相关文章

  1. [Angular] Learn Angular Multi-Slot Content Projection

    Now for au-modal component, we pass in tow component though contenct projection: <au-modal class= ...

  2. [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 ...

  3. [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 ...

  4. [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 ...

  5. Angular2.0的项目架构

    Angular2.0的项目架构 一.项目服务端app a) Controller控制器 b) Router路由 c) Service服务 d) Public公共样式及脚本和图片等静态资源 e) Vie ...

  6. C#版的mongodb最新的官方驱动2.4.0版本

    已经升级了mongodb至最新的3.4的版本,我想想也该把驱动升到最新的了,我用的驱动还是1.7的版本呢,之前几次想升级,都是因为升级驱动需要改动的代码太大了,升级的成本很高,所以懒得动,就这么的用了 ...

  7. Angular:利用内容投射向组件输入ngForOf模板

    现在,我们写一个组件puppiesListCmp,用于显示小狗狗的列表: //puppies-list.component.ts @Component({ selector: 'puppies-lis ...

  8. angular5 @viewChild @ContentChild ElementRef renderer2

    @viewChild 作用一:选择组件内节点 <!--视图 --> <div #mydiv><input></div> // 选择 @ViewChild ...

  9. Angular4学习笔记(八)- ng-content

    内容投影 ng-content ng-content是一个占位符,有些类似于router-outlet. 以前举の例子,父组件包含子组件都是直接指明子组件的selector,比如子组件的selecto ...

随机推荐

  1. 7个步骤:让JavaScript变得更好

    Dan Odell介绍了他编写的七步写出无瑕代码的计划,是在简化过程中最有用的工具.   随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加.然 ...

  2. Crowd 2.7汉化中文包(原创首发)

    介绍:Crowd是用来集成Atlassian各类产品用户集成系统,如Jira,Confluence等的集中用户管理平台.可对组.成员关系.用户.目录.应用程序及权限进行综合管理,并可实现其他程序的单点 ...

  3. uboot mmc烧写命令

    mmc write addr blk# cnt 这个命令的作用是将内存上的数据写入mmc中 参数: addr: 从内存读取的位置 blk: 写入到mmc中block位置,这个位置是mmc的0地址的偏移 ...

  4. oracle中dual的使用

    dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下:1.查看当前用户,可以在 SQL Plus中执行下面语句select ...

  5. as3 中文转拼音

    private static const PinYin:Object = {"a":"\u554a\u963f\u9515","ai":&q ...

  6. MySQL workbench 中文乱码 显示口口

    Edit-->perference...-->Apperance  如下图 即可 转载自:http://blog.csdn.net/shxluwei/article/details/802 ...

  7. Android手机无法访问百度空间的解决办法

    本文网址:http://www.cnblogs.com/tunnel213/p/4301165.html 现象: 百度“JavaScript函数高级”后找到一篇文章,百度空间的,无法查看: 配置: 三 ...

  8. jquery实现css3动画

    jquery animate改变元素样式时,只支持数字值的变化,比如width,height等,但是css3属性状态值很多都不是数字值,而是字符串和数字混合在一起,比如translate(), rot ...

  9. asp.net微信jsapi支付

    1.前台页面: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head ru ...

  10. 通过a++来理解闭包改变作用域的问题

    纯属个人理解,如果有误请指出! 让我们先看一段代码 function dog(){ var a=100; a++; return a; } alert(dog()); alert(dog()); 我们 ...