Angular ng-bootstrap tabset字段不起作用

时间：2018-11-16 14:37:55

标签： angular typescript angular5 ng-bootstrap 

    {
  "name": "ModalWindow",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.5.5",
    "rxjs": "6.3.0",
    "rxjs-compat": "^6.3.3",
    "sass": "^1.15.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@ng-bootstrap/ng-bootstrap": "^1.1.1",
    "@types/node": "^10.0.4",
    "angular2-template-loader": "^0.6.2",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.3.0",
    "typescript": "^2.8.3",
    "webpack": "4.8.1",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "3.1.4"
  }
}

这是我的package.json，我不明白这是什么错误，但是ng-bootstrap中的tabset无法正常工作。

1 个答案:

答案 0 :(得分：1)

最新版本4.0.0与您在package.json中使用的版本（即^ 1.1.1）之间的主要区别在于，在最新版本中没有必要导入NgbModule为NgbModule.forRoot()。例如-

此代码在4.x.x版本中适用

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule],
  declarations: [....],
  bootstrap: [...]
})

但是，如果您在使用的1.1.1版本中如上所述导入NgbModule，则会得到以下错误

  

错误错误：StaticInjectorError（AppModule）[NgbTabset->   NgbTabsetConfig]：StaticInjectorError（平台：核心）[NgbTabset->   NgbTabsetConfig]：NullInjectorError：NgbTabsetConfig没有提供程序！

这是因为在较低版本中，您需要在根模块中使用.forRoot()，以使其在应用程序的所有其他模块和组件中可用。

因此对于您正在使用的1.1.1版本，您需要在根模块app.module.ts中使用以下代码

此代码在1.1.1版中适用

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule.forRoot()],
  declarations: [AppComponent, NgbdTabsetBasic],
  bootstrap: [AppComponent]
})

以下是使用Angular 5和ng-bootstrap版本1.1.1的完整示例-

package.json（与您所使用的相同） 

{
  "name": "ModalWindow",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "1.1.1",
    "core-js": "^2.5.5",
    "rxjs": "6.3.0",
    "rxjs-compat": "^6.3.3",
    "sass": "^1.15.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@types/node": "^10.0.4",
    "angular2-template-loader": "^0.6.2",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.3.0",
    "typescript": "^2.8.3",
    "webpack": "4.8.1",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "3.1.4"
  }
}

app.component.html 

<div class="container-fluid">
  <ngbd-tabset-basic></ngbd-tabset-basic>
</div>

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
}

app.module.ts 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { NgbdTabsetBasic } from './tabset-basic';

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule.forRoot()],
  declarations: [AppComponent, NgbdTabsetBasic],
  bootstrap: [AppComponent]
})
export class AppModule {}

tabset-basic.html 

<ngb-tabset>
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
      master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
      dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
      iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    </ng-template>
  </ngb-tab>
  <ngb-tab>
    <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
    <ng-template ngbTabContent>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
      <p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
      craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl
      cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
      yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean
      shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero
      sint qui sapiente accusamus tattooed echo park.</p>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Disabled" [disabled]="true">
    <ng-template ngbTabContent>
      <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

tabset-basic.ts 

import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-tabset-basic',
  templateUrl: './tabset-basic.html'
})
export class NgbdTabsetBasic { }

注意：

我们需要添加Bootstrap 4.0 CSS作为依赖项。可以通过以下两种方式添加CSS：  1.在<link>页的样式表中添加一个index.html标签  2.如果您正在使用angular-cli，则可以将其添加到styles文件的.angular-cli.json部分中，例如

"styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ]

这是一个完整的工作演示https://stackblitz.com/edit/angular-wfkcak

更新：在通过stackblitz链接后，我发现您忘记添加bootstrap 4 CSS文件。我已将其添加到index.html文件中。 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

您还可以将其添加到angular.json数组下的.angular-cli.json（对于6号角）或styles（对于5号角），如上所述。

这是更新的堆叠闪电战https://stackblitz.com/edit/angular-gmedf1

相关问题
最新问题