带有 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 已更新。