gpt4 book ai didi

angular - ng-content : transclude the content of the container element, 而不是元素本身?

转载 作者:行者123 更新时间:2023-12-04 02:07:01 24 4
gpt4 key购买 nike

我有一个基于 Bootstrap 的模态对话框组件,具有三个主要子元素:标题、摘要页脚:

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>

不幸的是,包含元素(headersummaryfooter)也包含在“包含”中,这违反了 Bootstrap 格式.我可以只嵌入容器节点的内容吗?

最佳答案

如何包装要嵌入到 <ng-container> 中的标记?元素并使用另一种类型的选择器从 <ng-content> 中获取它(属性选择器、CSS 类选择器...)?

<ng-container>应该对现有布局/CSS 的干扰较小。

从消费者的 Angular 来看:

<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>

关于angular - ng-content : transclude the content of the container element, 而不是元素本身?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42503802/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com