Angular 6 - ng-bootstrap - 在选项卡级别添加自定义数据属性

Posted 2023-03-13

【中文标题】Angular 6 - ng-bootstrap - 在选项卡级别添加自定义数据属性

【英文标题】：Angular 6 - ng-bootstrap - Add custom data attribute on the tab level

【发布时间】：2019-03-23 09:40:48

【问题描述】：

我使用 ng-boostrap 创建了以下结构：

<ngb-tabset>
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>   

我需要向此模板生成的“li”或“a”元素添加自定义数据属性。比如：

<li data-test="test">
    <a></a>
</li>

知道我是否可以这样做吗？

【问题讨论】：

我不认为你可以，因为这些库的目的是抽象那些东西。也许尝试使用自定义指令在您的标签中搜索 li ？类似<ngb-tab addCustomAttribute="my-custom-attribute" title="Tab 1">

@trichetriche，也许您可​​以在您的解决方案中添加答案？

我不是为你编码...试试看，如果你遇到问题，我会在那里！

@trichetrichem，我只是想把你的答案标记为正确的，哈哈

您不用担心，我有足够的声誉，只需尝试一下，如果您对此有疑问，请创建另一个问题，如果您愿意，请通过此问题通知我，以便我可以帮你！

【参考方案1】：

这样做：

<ngb-tab>
    <ng-template ngbTabTitle>Tab 1</ng-template>
    <ng-template ngbTabContent>Text 1
    </ng-template>
</ngb-tab>
<ngb-tab>
    <ng-template ngbTabTitle>Tab 2</ng-template>
    <ng-template ngbTabContent>Text 2
    </ng-template>
</ngb-tab>

【讨论】：

数据属性在哪里？