Question

我在我的angular2演示中使用了NgbModal，而且我根据ng-boostrap开始了，但仍然出现了错误。

app.module.ts

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

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

systemjs.config.js

map: {
  '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
}

message.component.ts

import {Component, Input} from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
    moduleId: module.id,
    selector: 'sims-message',
    templateUrl: 'message.component.html'
})

export class MessageComponent {
    @Input() msg: string;

    constructor(public activeModal: NgbActiveModal) {
    }
}

message.component.html

<div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Hi there!</h4>
</div>
<div class="modal-body">
    <p>{{msg}}！</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>

home.component.ts

import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {MessageComponent} from "../shared/common/message/message.component";

@Component({
    moduleId: module.id,
    selector: 'sims-home',
    templateUrl: 'home.component.html'
})

export class HomeComponent {
    constructor(public modalService: NgbModal) {
    }

    openModal(msg: string): void {
        const modalRef = this.modalService.open(MessageComponent);
        modalRef.componentInstance.msg = msg;
    }
}

在打开模态时，出现以下异常：

 "TypeError: this._applicationRef.attachView is not a function
    at NgbModalStack._getContentRef (http://localhost:3000/node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js:3770:34)
    at NgbModalStack.open (http://localhost:3000/node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js:3729:31)
    at NgbModal.open (http://localhost:3000/node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js:3914:33)
    at HomeComponent.openModal (http://localhost:3000/src/app/component/home/home.component.js:22:42)
    at _View_HomeComponent0._handle_click_9_0 (/AppModule/HomeComponent/component.ngfactory.js:68:30)
    at eval (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9437:28)
    at eval (http://localhost:3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js:1525:40)
    at eval (http://localhost:3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js:1638:115)
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:232:26)
    at Object.onInvoke (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6206:41)"

NgbModal - TypeError：this._applicationRef.attachView不是函数

0 个答案: