<divclass="demo"><h2>demo-component - 可嵌入外部内容的组件</h2><divclass="content"><ng-content></ng-content></div><divclass="content blue"><ng-contentselect="header"></ng-content></div><divclass="content red"><ng-contentselect=".demo2"></ng-content></div><divclass="content gr...
您还可以使用<ng-content>的select属性来控制内容的投影方式,而不是在单个的<ng-content>中投影每个内容。它需要一个元素选择器来决定特定的<ng-content>中投影哪些内容. 方法如下: 我们修改<project-content>来演示如何使用多内容投影。Select属性选择器将在特定的<ng-content>中呈现的内容。这里我们首先选择呈现h1...
<ng-content select=".content"></ng-content> </div> </div> 2. 在外部去引用它 <lib-list-box><divclass="header">我是组件外部的header~</div><divclass="content">我是组件外部的content~</div><divname="content">我是组件外部的content123~</div></lib-list-box> 多个ng-content 针对性投射...
现在,如果移除card-body,卡片body什么也显示不出来,那是因为我们定义的<ng-content>具有选择性--只有带有card-body属性的元素才可以代替插槽。 3.4 强大的选择器 <ng-content>中select属性非常强大。举几个例子, 3.4.1 带值的属性 <!-- card.component.html --> ... <ng-content select="[card-type=body]...
使用ngTemplateOutlet指令来渲染ng-template元素。 通过内置的动态指令*ngIf来控制是否渲染投影。 <div> 编号3 <ng-contentselect="[button]"></ng-content> <p*ngIf="expanded"> <ng-container[ngTemplateOutlet]="content.templateRef"></ng-container> ...
现在我们知道通过 ng-content 的select属性可以指定外部内容投射到指定的中。 而要能正确的根据select属性投射内容,有个限制就是- 不管是标签 header、class为"demo2"的div还是属性name为"demo3"的div,这几个标签都是作为 组件标签的直接子节点。 那如果不是作为直接子节点,会是什么情况呢?我们简单修改下引用 demo...
为了处理这个问题,<ng-content>支持一个select属性,可以让你在特定的地方投射具体的内容。该属性支持 CSS 选择器(my-element,.my-class,[my-attribute],...)来匹配你想要的内容。如果 ng-content 上没有设置select属性,它将接收全部内容,或接收不匹配任何其他ng-content元素的内容。长话短说:...
要在指令中使用ng-content,首先需要在组件模板中定义插槽。可以使用<ng-content></ng-content>标签来创建一个默认插槽,也可以使用<ng-content select="selector"></ng-content>标签来创建具有选择器的插槽。 例如,假设我们有一个名为"my-component"的组件,希望在组件中插入一些内容。我们可以在组件模板中使用ng-...
在组件form-item中通过ng-content的select属性(使用的是css的element选择器)投影form-item-label和form-item-wrap组件内容。 在form-item-label和form-item-wrap中则使用ng-content来嵌入模板代码,如果没有ng-content则组件中的模板代码无法展示。(组件内css样式不再展示) ...
ng-content封装的app-editable-box 组件// 这个是可以编辑的状态,这里包含前三种状态<div*ngIf="mode === 'edit'">// 这是是可编辑模式下,啥都没做时用来盛放相关content的地方<divclass="inactive-box"*ngIf="editStatus === 'inactive'"><ng-contentselect="[edit-mode-inactive-template]">//[edit...