Question

我想在angular2中创建accordion我不想重复手风琴的结构（只想创建一次并调用结构）并在整个应用程序中使用我们如何做到这一点就像在jquery中我们创建插件并嵌入HTML，但我们怎么能用angular2

来做到这一点

Answer 1

一种方法是使用"Angular powered Bootstrap"。您可以找到安装指南here。

这个项目包含open-source Angular组件，它们包装了bootstrap组件的html和css。它会生成以<ngb-...前缀开头的html标记。

下面是我刚刚编写的一个例子。我们假设我们创建了自己的TopicTreeComponent，以便在手风琴中显示Topic个实例。

为了这个例子，我们假设你有一个Topic类。

export class Topic
{
  public title;
  public text;
  ...
}

您需要一个显示这些组件的TopicTreeComponent类。

@Component({
  selector: 'topic-tree',
  templateUrl: './topictree.component.html',
  styleUrls: ['./topictree.component.css']})
export class TopicTreeComponent
{
  public topics: Topic[] = ... ;
}

然后您TopicTreeComponent的视图可能如下所示：

<nav>
  <ngb-accordion #acc="ngbAccordion"
    activeIds="ngb-panel-0"
    closeOthers="true">

    <ngb-panel *ngFor="let topic of topics">
      <ng-template ngbPanelTitle class="bg-inverse">
          {{topic.title}}
      </ng-template>

      <ng-template ngbPanelContent>
          {{topic.text}}
      </ng-template>
    </ngb-panel>

  </ngb-accordion>
</nav>

它迭代你班级的主题，并显示标题和文字。

此示例使用NgbAccordion组件，该组件记录为here。

如何在angular2中创建动态html

1 个答案: