Question

背景

我一直在我的应用程序中使用ng2-tabs，但今晚当我尝试运行它时，我收到错误抱怨components的冲突。

即使我删除了所有代码并从他们在npm上的页面中放了几行示例代码，它仍然会抛出错误。寻找解决方案我发现他们改为NGX-tabs所以我更新了。这没有用。

问题

由于新版本，ngx-tabs是否有任何原因会破坏我的应用？我无法理解错误。虽然看起来很简单。我不明白出了什么问题。

实施例

错误的

模板解析错误：↵多个组件匹配此问题   element.↵确保只有一个组件的选择器可以匹配a   给定元素.↵Conflicting组件：TabsetComponent，Tabset（＆＃34;↵[ERROR - ＆gt;]↵↵
  ↵＆＃34）：   AsideComponent @ 1:4＆＃34;

我不知道的是，为什么它一直在抱怨选择器。我不知道我的任何选择器在任何组件中都有重叠。

我的组件的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>

我的component.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并停止可以找到的旧here - 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-tab的引用。尝试删除node_modules文件夹并重新安装（npm install）。另外，请确保您已更新package.json。

带有Angular 2应用程序的Bootstrap选项卡

2 个答案: