Angular开发实践(八): 使用ng-content进行组件内容投射
在Angular中,组件属于特殊的指令,它的特殊之处在于它有自己的模板(html)和样式(css)。因此使用组件可以使我们的代码具有强解耦、可复用、易扩展等特性。通常的组件定义如下: demo.component.ts: import { Component,OnInit } from '@angular/core'; @Component({ selector: 'demo-component',templateUrl: './demo.component.html',styleUrls: ['./demo.component.scss'] }) export class DemoComponent implements OnInit { constructor() { } ngOnInit() { } } demo.component.html: <div class="demo"> <h2> demo-component - 我是一个简单的组件 </h2> </div> demo.component.scss: .demo { padding: 10px; border: 2px solid red; h2 { margin: 0; color: #262626; } } 此时我们引用该组件,就会呈现该组件解析之后的内容: <demo-component></demo-component>
假设现在有这样的需求,这个组件能够接受外部投射进来的内容,也就是说组件最终呈现的内容不仅仅是本身定义的那些,那该怎么做呢?这时就要请出本文的主角 简单投射我们先从最简单开始,在 demo.component.html 中添加 <ng-content></ng-content>,修改后的 demo.component.html 和 demo.component.scss 如下: demo.component.html: <div class="demo"> <h2> demo-component - 可嵌入外部内容的组件 </h2> <div class="content"> <ng-content></ng-content> </div> </div> demo.component.scss: .demo { padding: 10px; border: 2px solid red; h2 { margin: 0; color: #262626; } .content { padding: 10px; margin-top: 10px; line-height: 20px; color: #FFFFFF; background-color: #de7d28; } } 为了效果展示特意将 <ng-content></ng-content> 所在的容器背景色定义为橙色。 这时我们在引用该组件时可以从外部投射内容,外部内容将在橙色区域显示: <demo-component> 我是外部嵌入的内容 </demo-component>
针对性投射如果同时存在几个 <ng-content></ng-content>,那外部内容将如何进行投射呢? 我们先看个示例,为了区别,我再新增一个蓝色区域的 <ng-content></ng-content>,修改后的 demo.component.html 和 demo.component.scss 如下: demo.component.html: <div class="demo"> <h2> demo-component - 可嵌入外部内容的组件 </h2> <div class="content"> <ng-content></ng-content> </div> <div class="content blue"> <ng-content></ng-content> </div> </div> demo.component.scss: .demo { padding: 10px; border: 2px solid red; h2 { margin: 0; color: #262626; } .content { padding: 10px; margin-top: 10px; line-height: 20px; color: #FFFFFF; background-color: #de7d28; &.blue { background-color: blue; } } } 引用该组件: <demo-component> 我是外部嵌入的内容 </demo-component> 此时,我们将看到外部内容投射到了蓝色区域:
当然,如果你将橙色区域代码放在蓝色区域代码的后面,那么外部内容就会投射到橙色区域:
所以从上面的示例我们可以看出,如果同时存在简单的 <ng-content></ng-content> ,那么外部内容将投射在组件模板最后的那个 <ng-content></ng-content> 中。 那么知道这个问题,我们可能会想,能不能将外部内容有针对性的投射相应的 <ng-content></ng-content> 中呢?答案显然是可以的。 为了处理这个问题,<ng-content> 支持一个 直接看例子,修改后的 demo.component.html 和 demo.component.scss 如下: demo.component.html: <div class="demo"> <h2> demo-component - 可嵌入外部内容的组件 </h2> <div class="content"> <ng-content></ng-content> </div> <div class="content blue"> <ng-content select="header"></ng-content> </div> <div class="content red"> <ng-content select=".demo2"></ng-content> </div> <div class="content green"> <ng-content select="[name=demo3]"></ng-content> </div> </div> demo.component.scss: .demo { padding: 10px; border: 2px solid red; h2 { margin: 0; color: #262626; } .content { padding: 10px; margin-top: 10px; line-height: 20px; color: #FFFFFF; background-color: #de7d28; &.blue { background-color: blue; } &.red { background-color: red; } &.green { background-color: green; } } } 从上面代码可以看到,蓝色区域将接收 引用该组件: <demo-component> 开始,我是外部嵌入的内容, <header> 我是外部嵌入的内容,我在header中 </header> <div class="demo2"> 我是外部嵌入的内容,我所在div的class为"demo2" </div> <div name="demo3"> 我是外部嵌入的内容demo,我所在div的属性name为"demo3" </div> 结束 </demo-component>
此时,我们将看到外部内容投射到了指定的 <ng-content></ng-content> 中。 扩展知识ngProjectAs现在我们知道通过 ng-content 的 而要能正确的根据 那如果不是作为直接子节点,会是什么情况呢?我们简单修改下引用 demo-component 组件的代码,将 <demo-component> 开始,我是外部嵌入的内容, <div> <header> 我是外部嵌入的内容,我在header中 </header> </div> <div class="demo2"> 我是外部嵌入的内容,我所在div的class为"demo2" </div> <div name="demo3"> 我是外部嵌入的内容demo,我所在div的属性name为"demo3" </div> 结束 </demo-component>
此时,我们看到 为了解决这个问题,我们必须使用 <demo-component> 开始,我是外部嵌入的内容, <div ngProjectAs="header"> <header> 我是外部嵌入的内容,我在header中 </header> </div> <div class="demo2"> 我是外部嵌入的内容,我所在div的class为"demo2" </div> <div name="demo3"> 我是外部嵌入的内容demo,我所在div的属性name为"demo3" </div> 结束 </demo-component> 通过设置
|
- 即使未在ENV中设置-e,在第一次非零结果后退出Bash脚本
- 批处理判断C盘是否是SSD.bat
- laravel – Angular 2覆盖组件
- angular – Typescript Error预期0个参数,但在Ionic Framew
- 如何在AngularJs中调用第三方插件库
- angularjs – 使用$templateRequest装饰器停止使用Ng-anima
- 怎样让webservice 和struts2正常工作(web.xml的配置)
- webservice 中 获取 session
- WebService笔记之定制发布(wsdd)(Axis1.4)
- [Angularjs]ng-show和ng-hide