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

Question

我正在构建一个基于 accordion component from ng-bootstrap. You can try the original component on 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. What you can do is look for the Accordion module 并 fork 它！我不认为这是实现你想要的最简单的方法，但至少它会起作用。让我们看看。

在 ng-bootstrap.
在您的项目中创建一个空模块。我叫它 accordion-next.
在您的项目中创建一个空组件。我称它为 accordion-toto.
Copy/paste 你的 ng-bootstrap 模块并修复你遇到的任何错误。 isString 例如。
使用你的模块。
尽情享受吧。

stackblitz demo

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

How to edit a ng-template to use my HTML?

web-component

bootstrap-4

ng-bootstrap

angular