帶有 Angular 2 應用程序的 Bootstrap 選項卡

Question

背景

我一直在我的應用程序中使用ng2-tabs ，但今晚當我嘗試運行它時，我收到錯誤，抱怨components沖突。

即使我刪除了所有代碼並從他們在 npm 上的頁面中添加了幾行示例代碼，它仍然會引發錯誤。 在尋找解決方案時，我發現它們已更改為 NGX-tabs，因此我進行了更新。 這沒有幫助。

問題

由於新版本， ngx-tabs是否有任何原因會破壞我的應用程序？ 我無法理解這個錯誤。 雖然看起來很簡單。 我不明白出了什么問題。

例子

錯誤

模板解析錯誤：↵超過一個組件匹配此元素。↵確保只有一個組件的選擇器可以匹配給定元素。↵沖突組件：TabsetComponent,Tabset ("↵ [ERROR ->]↵ ↵
↵"): AsideComponent@1:4"

我不明白的是為什么它一直抱怨選擇器。 我不知道我的任何選擇器在任何組件中重疊。

我的組件的 html 部分，

<aside class="aside-menu">
    <tabset> // error on tabset but app runs when I remove this block.
        <tab>
            <template tabHeading><i class="fa fa-list"></i>
            </template>
        </tab>
     </tabset>  // end of tabset
</aside>

我的組件.ts

import { Component }            from '@angular/core';
import { Router }               from '@angular/router';
import { Auth }                 from './../services/auth.service';
import {TabsModule}             from "ngx-tabs";

@Component({
    selector: 'application-aside',
    templateUrl: './aside.component.html'
})
export class AsideComponent {
       constructor( private router: Router, private auth: Auth  ) { }

}

資源

鏈接到我認為我們現在應該使用的新NGX-TABS並停止可以在此處找到的舊版本- NG2-TABS

如果有人有任何意見，我將不勝感激。

Answer 1

在 app.module.ts 中添加
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
@NgModule({
進口：[ BrowserModule, Ng2BootstrapModule.forRoot(),..}]

並在您的 home.component.ts 中：
import { TabsModule } from 'ng2-bootstrap';

在 home.component.html 中：

 <div>
      <tabset>
        <tab heading="Basic title" id="tab1">Basic content</tab>
        <tab heading="Basic Title 1">Basic content 1</tab>
        <tab heading="Basic Title 2">Basic content 2</tab>
      </tabset>
    </div>

在 system.js 中：

 'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ngx-bootstrap.umd.js',
'moment'                    :                       'npm:ng2-bootstrap/node_modules/moment/moment',

Answer 2

我認為您的 node_modules 文件夾中仍然存在對舊 ng2-tabs 的引用。 嘗試刪除node_modules文件夾並重新安裝（npm install）。 還要確保您的 package.json 已更新。