如何编辑ng-template以使用我的HTML？

Question

我正在构建一个基于ng-bootstrap的accordion component的web组件。您可以在stackblitz上尝试原始组件。我想要的是那个

<ng-template ngbPanelTitle>
</ng-template>

产生

<div role="tab" id="ngb-panel-1-header" class="card-header ">
    <a href="" aria-expanded="false" aria-disabled="false" class="btn btn-block btn-primary" role="button" style="padding: 0.75rem 1.25rem;">
<!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!---->
     </a>
 </div>

而不是

<div role="tab" id="ngb-panel-1-header" class="card-header ">
    <a href="" aria-expanded="false" aria-disabled="false">
<!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!---->
     </a>
 </div>

Answer 1

你可以使用的解决方案是FOSS的力量！ FOSS的力量是什么？ ng-bootstrap是MIT Open Source project。你可以做的是寻找Accordion module并分叉吧！我不认为这是实现你想要的最简单的方法，但至少它会起作用。让我们看看。

1. 在ng-bootstrap中搜索Accordion模块。
2. 在项目中创建一个空模块。我称之为accordion-next。
3. 在项目中创建一个空组件。我称之为accordion-toto。
4. 将ng-bootstrap模块复制/粘贴到您的模块中并修复您遇到的任何错误。例如isString。
5. 使用您的模块。
6. 享受。

stackblitz demo