Question

我有一个基于Bootstrap的模态对话框组件，有三个主要子元素： title，summary 和 footer ：

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">&times;</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 {
}

目的是简化Bootstrap样板：

<modal>
  <header>Hello world!</header>
  <summary>A  message</summary>
  <footer>Dialog footer</footer>
</modal>

不幸的是，包含元素（标题，摘要和页脚）也包含在“transclusion”中，这违反了Bootstrap格式。我可以只转换容器节点的内容吗？

Answer 1

如何包装标记以在<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>

ng-content：转换容器元素的内容，而不是元素本身？

1 个答案: