我个人把ng-content理解成Component工厂，能根据用户指定的配置信息，动态生成Component，即configurable Component，这种行为称之为Content Projection...Components that are used in published libraries make use of ng-content to make themselves configurable...运行时，上图的div元素，会被渲染到project-content Component的ng-content标签内。 看一个更复杂一些的例子： ?...ng-content的select属性值，决定了具体哪些UI内容会被注入到ng-content里。...剩下的所有内容都被注入到最后一个不含select属性的ng-content中去。 消费该project-content的例子： ?
然后你发现了 ，并找到了一些关于它的文章，进而实现了所需的功能。 接下来我们来通过一个简单的示例，一步步介绍 所涉及的内容。...如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。...> </ng-content...'Hide' : 'Show' }}
ng-conent提供了@ContentChild和@ContentChildren来获取ng-conent里面包含的组件(类似@ViewChild和@View...
源代码：https://github.com/wangzixi-diablo/ngDynamic/tree/main/src/app/ng-content parent： ?
-- single slot transclusion here --> 用法也相应的修改一下
select="h3"> 邮箱 <auth-message [style.display]="(showMessage...'inherit' : 'none')"> ...select="auth-remember"> <auth-message [style.display]="(showMessage...'inherit' : 'none')">
这时就要请出本文的主角 ng-content。...> ...如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。...> 无法匹配到之前的 标签 header，故而将这部分内容投射到了橙色区域的 </ng-content
当时我对 和 的区别感到困惑。 在寻求知道我的问题的答案的过程中，我发现了 的概念。...除了将每个内容投影到单个 中之外，您还可以使用 的 select 属性控制内容的投影方式。...ng-content vs. *ngTemplateOutlet 它们都可以帮助我们实现高度定制化的组件，但选择哪个以及何时选择？...这不是 ng-content 的情况。 它按原样呈现内容。 您最多可以在 select 属性的帮助下拆分内容并在视图的不同位置呈现它们。 您不能有条件地呈现 ng-content 中的内容。...至少现在我们的武器库中有一个新武器 *ngTemplateOutlet，除了 ng-content 的功能外，它还提供了对内容的更多控制！
接下来我们来看一下，如何利用 指令实现上述的功能。...如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。...select="auth-remember"> ...ContentChild 上面我们已经介绍了内容投射的相关概念及 指令的常见用法。下面我们来介绍在组件内部，如何获取 投射的内容。.../div> ` }) export class
Component({ selector: 'app-host-decorator', template: ` @Host -- 获取宿主元素注入器里面注入的对象 `, providers: [ HostComponentService, {provide: TOKEN_HOST_CLASS_PROVIDER,...HostDecoratorComponent { } app-host-decorator-child的实现，该child Component的template内容，会显示在parent Component的ng-content...host-token-component.service'; @Component({ selector: 'app-host-decorator-child', template: ` child Component里，ng-content
投影一块内容 容器组件这样写 编号1 业务组件这样用 未指定投影位置的内容会被投影到无...="h3"> 业务组件这样用 ...在这种情况下，不建议使用 ng-content 元素，因为只要组件的使用者提供了内容，即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 ngIf 语句的内部，该内容也总会被初始化... 5.
cx-org-card的selector里使用ng-content定义了允许动态内容注入的注入点： 高亮这段代码的语义是，将包含有属性值actions的html元素，动态注入到div class=actions
from '@angular/core'; @Component({ selector: 'app-zippy-basic', template: ` Default: Question: ` }) export class ZippyBasicComponent...总结 如果组件包含一个没有 select 属性的 ng-content 元素，则该实例会接收与任何其他 ng-content 元素都不匹配的所有投影组件。
dialog-content"> {{dialogTitle}} 补充样式 .overlay { .... } .dialog-container... dialogRef 是这个组件的引用别名 类似Vue中的插槽，之内的html会替换组件内部的 效果如下，点击show按钮，显示弹窗，点击弹窗中的关闭按钮，恢复原样。
参考链接：Angular ng-content and Content Projection: A Complete Guide - How To Use ng-content To Improve Component...新版使用ng-content的实现： @Component({ selector: 'fa-input', template: ` `, styleUrls: ['.
app-content-section 的 Component，用于容纳内容投影(content projection)： 这个 Component 的模板区域，分别定义了三个 div 区域，里面包含了对应的内容投影占位符 ng-content...问题分析 第一个 div 标签同时满足第一条和第三条内容投影规则，因此其被投影到第一个 ng-content 之后，就不会再重复被投影了。...我们可以做一个测试，把提供内容投影场所的 Component 内的第一个和第三个 ng-content 调换一下顺序： 这次的测试结果，红色区域出现的两个元素，其 name 属性值都为 test....当 Component 的模板文件被解析，遇到 ng-content 时： 触发 ɵɵprojection 函数。
Angular ngTemplateOutlet和ng-content的区别 参考文献：Everything you need to know about ng-template, ng-content..., ng-container, and *ngTemplateOutlet in Angular 二者都能帮助Angular开发者实现高度可定制化的Component. ng-content只是简单地将消费者传入的内容进行显示...无法使用ng-content进行形如ngTemplateOutlet那样的条件渲染。
再看这段代码： 这段代码涉及到了 Angular 中的两个重要概念：ng-template...和 ng-content。...现在我们来分析这段代码： 这段代码创建了一个名为 content 的模板引用变量...，并在模板内使用了 ng-content。...这意味着，当这个组件被其他组件使用时，任何放在这个组件标签之间的内容都会被投影到 ng-content 的位置。
通过查阅 Angular 官网，发现这里把 ng-container 和 ng-content 弄混淆了。此处应该使用 ng-content....解决方案 ng-content 之间不允许再插入其他元素。仅仅充当一个占位符的角色。 使用 ng-content 之后问题消失。...这里我们可以通过单步调试的方式，搞清楚被投影的内容是如何插入到 ng-content 占位符里的。...modification： 首先执行 template 函数，将 Component 本身的 h2 元素，进行 HTML 源代码的渲染： 接下来是 Angular 处理整个内容投影逻辑的关键： 遇到 ng-content...，则调用函数 ɵɵprojection： 转而调用 applyProjection： parent node 即是指定义了 ng-content 的 Component 对应的 dom 元素： rNode
cx-org-sub-list下面的这个a标签，渲染时不会直接出现在cx-org-sub-list下面，而是出现在cx-org-sub-list内部出现了ng-content select=actions...打开sub-list.component.html，里面使用ng-content select=actions, 定义了可以动态注入UI的注入点： ?...上图actions class div内的a，实际是通过下面这个ng-content动态注入的： ? 为了验证这一点，我们可以做个实验： ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
