ng-content:transclude容器元素的内容,而不是元素本身?
问题描述:
我具有基于自举与三个主子元素模态对话框组分:标题,摘要和页脚:ng-content:transclude容器元素的内容,而不是元素本身?
import { Component, Input } from '@angular/core';
@Component({
selector: 'modal',
template: `<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><ng-content select="header"></ng-content></h4>
</div>
<div class="modal-body">
<ng-content select="summary"></ng-content>
</div>
<div class="modal-footer">
<ng-content select="footer"></ng-content>
</div>
</div>
</div>
</div>`
})
export class ModalComponent {
}
的目的是简化引导样板:
<modal>
<header>Hello world!</header>
<summary>A message</summary>
<footer>Dialog footer</footer>
</modal>
不幸的是,包含元素(标题,摘要和页脚)也包含在违反Bootstrap格式的“transclusion”中。我只能跨越容器节点的内容吗?
答
如何将标记换行以覆盖<ng-container>
元素并使用另一种类型的选择器从<ng-content>
(属性选择器,CSS类选择器...)中获取它?
<ng-container>
应该对现有布局/ CSS的干扰较小。
从消费者的角度来看:
<modal>
<ng-container header>Hello world!</ng-container>
<ng-container class="summary">A message</ng-container>
</modal>
里面的模态分量的模板:
<!-- Attribute selector -->
<ng-content select="[header]"></ng-content>
<!-- CSS class selector -->
<ng-content select=".summary"></ng-content>
+0
这是不行的,因为NG-容器是一个虚拟的元素 - 你以下例外: DOMException:无法在'Node'上执行'appendChild':此节点类型不支持此方法 – pFrenchie
我喜欢这样 –