如何编辑ng-template以使用我的HTML? [英] How to edit a ng-template to use my HTML?

问题描述

我正在基于以下网站的手风琴组件构建一个Web组件ng-bootstrap.您可以在 stackblitz 上尝试使用原始组件.我想要的是

I am building a webcomponent based on the accordion component from ng-bootstrap. You can try the original component on stackblitz. What I would like is that

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

推荐答案

您可以使用的解决方案是FOSS的强大功能！ FOSS的力量是什么? ng-bootstrap是 MIT开源项目.您可以做的是寻找手风琴模块并分叉！我认为这不是实现您想要的最简单的方法，但至少它会起作用.让我们看看.

A solution you could use is the power of FOSS! What is the power of FOSS? Well ng-bootstrap is a MIT Open Source project. What you can do is look for the Accordion module and fork it! I dont think it is the easiest way to achieve what you want but at least it will work. Lets see.

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

1. Search the Accordion module inside ng-bootstrap.
2. Create an empty module in your project. I called it accordion-next.
3. Create an empty component in your project. I called it accordion-toto.
4. Copy/paste the ng-bootstrap module in yours and fix any errors you face. isString for example.
5. Use your module.
6. Enjoy.

stackblitz演示

这篇关于如何编辑ng-template以使用我的HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！