Question

我刚安装了npm bootstrap4，字体很棒，还有ng-bootstrap，我正在尝试一些ng-bootstrap演示代码。没有什么工作。

第一次发布并且相当新的Angular世界。如果我没有以正确的格式发布此内容或在错误的区域内提问，请放心。

我想了解ng-bootstrap的用法。

app.module.ts：

import { Router } from 'react-router-dom'
<Router history={history}> <Router/>

app.main.html：

  import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
    import { RouterModule } from '@angular/router';
    import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

    import { AppComponent } from './app.component';
    import { CustomersModule } from './customers/customers.module';
    import { WelcomeComponent } from './welcome/welcome.component';

    @NgModule({
     declarations: [
        AppComponent,
        WelcomeComponent
     ],
     imports: [
        BrowserModule,
        HttpClientModule,
        AngularFontAwesomeModule,
        RouterModule.forRoot([
            { path: 'home', component: WelcomeComponent },
            { path: '', redirectTo: 'home', pathMatch: 'full'},
            { path: '**', redirectTo: 'home', pathMatch: 'full'}
         ]),
         CustomersModule
      ],
      bootstrap: [`enter code here`AppComponent, WelcomeComponent]
    })
    export class AppModule { }

app.component.ts：

<div class="container">
  <ngb-tabset>
    <ngb-tab title="Bacon">
      <ng-template ngbTabContent>
        <p class="mt-4">Content for tab 1.
          <button type="button" class="btn btn-secondary" placement="bottom" ngbPopover="A popover in tab 1" popoverTitle="Bacon is good">
            Click me
          </button>
        </p>
      </ng-template>
    </ngb-tab>
    <ngb-tab title="Lettuce">
      <ng-template ngbTabContent>
        <p>Content for tab 2</p>
      </ng-template>
    </ngb-tab>
    <ngb-tab title="Tomatoes">
      <ng-template ngbTabContent>
        <p>Content for tab 3</p>
      </ng-template>
    </ngb-tab>
  </ngb-tabset>
</div>

角-CLI：

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

@Component({
  selector: 'pm-root',
  styleUrls: ["./shared/app.css"],
  templateUrl: './app.main.html'
})
export class AppComponent {
  pageTitle: string = 'MeLo 2';
}

的package.json：

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "api"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "pm",
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js"
      ]
    }

错误：

  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "angular-font-awesome": "^2.3.7",
    "bootstrap": "^4.0.0-alpha.6",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "popper.js": "^1.12.3",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },

Answer 1

仔细阅读installation guide。如果在根模块中引用了组件，则必须在root.module.ts中写入

imports: [NgbModule.forRoot(), ...],

如果您在其他模块中引用了组件，则必须在module.module.ts

中编写

imports: [NgbModule, ...]

ng-bootstrap在初始安装时无法正常工作

1 个答案: