Question

我在angular4中使用了SB-Admin-BS4-Angular-4-master主题。 主题已链接到https://v4-alpha.getbootstrap.com/ 我想在我的代码中使用bootstrap模式。我根据主题中的文档使用了模态。

对于我使用的相同

import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

app.module.ts中的

然后我不得不通过npm安装ng-bootstrap，因为它不起作用。

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

当我安装ngbootstrap时，正在删除webpack ..

Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

我按照Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

重新安装了webpack

现在，当我打开我使用模态代码的模块时，我收到错误此错误。

 Error: Uncaught (in promise): Error: No provider for NgbModalStack!
injectionError@http://localhost:4200/vendor.bundle.js:58005:90
noProviderError@http://localhost:4200/vendor.bundle.js:58043:12
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype._throwOrNull@http://localhost:4200/vendor.bundle.js:59485:19
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype._getByKeyDefault@http://localhost:4200/vendor.bundle.js:59524:20
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype._getByKey@http://localhost:4200/vendor.bundle.js:59456:20
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype.get@http://localhost:4200/vendor.bundle.js:59325:16
resolveNgModuleDep@http://localhost:4200/vendor.bundle.js:66317:12
_createClass@http://localhost:4200/vendor.bundle.js:66363:113
_createProviderInstance$1@http://localhost:4200/vendor.bundle.js:66328:26
resolveNgModuleDep@http://localhost:4200/vendor.bundle.js:66313:17
../../../core/@angular/core.es5.js/</N…
Stack trace:
resolvePromise@http://localhost:4200/polyfills.bundle.js:6634:31
resolvePromise@http://localhost:4200/polyfills.bundle.js:6605:17
scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:6683:17
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6264:17
onInvokeTask@http://localhost:4200/vendor.bundle.js:60717:24
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6263:17
../../../../zone.js/dist/zone.js/</</Zone.prototype.runTask@http://localhost:4200/polyfills.bundle.js:6031:28
drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:6441:25
../../../../zone.js/dist/zone.js/</</ZoneTask.invokeTask@http://localhost:4200/polyfills.bundle.js:6342:21
invokeTask@http://localhost:4200/polyfills.bundle.js:7266:9
globalZoneAwareCallback@http://localhost:4200/polyfills.bundle.js:7284:17
  core.es5.js:1020

如果我已经使用bootstrap主题来使用bootstrap组件，是否需要安装ng-bootstrap？

HTML代码

<div class="tableinfowrap">
  <div class="card-header">
      <div class="row">
        <div class="col-xl-10"><h3>Tables</h3></div>
        <div  class="col-xl-2"> <a class="btn btn-primary" [routerLink]="['addresttable']" role="button">Add Table</a> </div>
      </div>

  </div>
<table class="card-block table table-hover">
  <thead>
  <tr>
    <th>Table Number</th>
    <th>Sitting Capacity</th>
    <th>QR Code Url</th>
    <th></th>
    <th></th>
  </tr>
</thead>
<tbody *ngFor="let table of tablelist" >
<tr>
<td>{{table.tableNumber}}</td>
<td>{{table.seatingCapacity}}</td>
<td>{{table.qrCodeUrl}}</td>
<td ><i class="fa fa-fw fa-edit"></i></td>
<td (click)="open(content)"><i class="fa fa-fw fa-trash"></i></td>
</tr>
</tbody>
</table>


<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</ng-template>
</div>

.ts文件代码

import { Component, OnInit } from '@angular/core';
import { Router, RouterModule} from '@angular/router';
import { routerTransition } from '../../router.animations';
import { plainToClass } from 'class-transformer';
import { classToPlain } from 'class-transformer';
import {FormsModule} from '@angular/forms';
import {TablesbyResId, ResTablesData} from '../../model/TablesbyResId';
import {TablebyResIdService} from '../../services/TablebyResIdService.service';
import { NgbModule, NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-tableinfo',
  templateUrl: './tableinfo.component.html',
  styleUrls: ['./tableinfo.component.scss'],
  providers: [TablebyResIdService ,NgbModal]
})
export class TableinfoComponent implements OnInit {
  tablelist: ResTablesData[];
  deletemodal = false;
  message: boolean;
  closeResult: string;
  constructor(public router: Router, public tablebyresidservice: TablebyResIdService, private modalService: NgbModal) { }

  ngOnInit()
  {
    this.tablebyresidservice.getTablebyIdApi()
    .subscribe(
      res =>
          {
              const tableResponse = plainToClass(TablesbyResId, res as Object)
              console.log(tableResponse);
              if (res.error === true){
              alert(res.message);
              console.log(res.message);
              console.log(res.statusCode);
              console.log(res.error);
              /* this.router.navigate(['/login']); */
          }
              else
              {
                console.log("api hit success");
                this.tablelist = tableResponse.data;
              }
      },
       error => {this.tablebyresidservice.throwError(error);},
       () => {}
      );
  }


   open(content) {
    this.modalService.open(content).result.then((result) => {
        this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
    } else {
        return  `with: ${reason}`;
    }
}
}

Answer 1

如果您希望以Angular方式使用模式，则需要安装ng-bootstrap。你的主题使用它。

在遇到类似问题的同时，NgbModule.forRoot()似乎是解决问题。

但如果这对你没有帮助，我在你的日志中看到了这个错误Uncaught (in promise)。可能正在使用ModalDismissReasons。

在我使用NgbModalRef的项目中，您可以尝试下面的代码。

您的导入看起来像import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';

在您的班级modalReference: NgbModalRef;

中定义TableinfoComponent

现在这是open(content)看起来

的方式

open(content) {
    this.modalReference = this.modalService.open(content);
    this.modalReference.result.then((result) => {
      console.log(result);
    });
}

删除所有其他代码，包括getDismissReason并尝试。

对我有用，希望这会对你有所帮助。

Answer 2

ng-bootstrap是一系列使用bootstrap4.0.css的小部件。当我们安装ng-bootstrap时，我们只需要bootstrap.min.css。

npm install --save @ng-bootstrap/ng-bootstrap

我们可以下载bootstrap.min.css，例如如果我们使用angular-cli修改了angular-cli.json中的“styles”标签

"styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
      ],

bootstrap是一系列小部件+ bootstrap.css。当我们安装bootstrap时，我们不需要导入bootstrap.min.css

npm install bootstrap@4.0.0-beta.2

他们都有模态

angular4-如果我使用bootstrap 4 alpha主题创建项目，是否需要安装ng-bootstrap

2 个答案: