打不开最简单的Modal

Question

我基本上是从ng-bootstrap Modal Documentaion复制模态示例，但我似乎无法打开它。

我一点击按钮打开模态框，Chrome 的控制台就大喊：

Uncaught TypeError: Cannot set property stack of [object Object] which has only a getter

提前致谢！

编辑：

这是我的模态组件代码：

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

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

@Component({
    selector: 'add-transaction',
    templateUrl: './app/components/add-transaction/AddTransaction.html'
})
export class AddTransaction {
    closeResult: string;

    constructor(private modalService: NgbModal) {}

    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}`;
        }
    }
}

模态 HTML:

<template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
    </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>
</template>

<button class="btn btn-success" (click)="open(content)">New Transaction</button>

<pre>{{closeResult}}</pre>

此 Modal 组件正被另一个具有 <th>:

的组件使用

<th><add-transaction></add-transaction></th>

更新：

可能值得注意的是，在调试它时，我可以看到在调用 this.modalService.open(content) 时在 open 方法上弹出错误

Answer 1

Heads up! The NgbModal service needs a container element with the ngbModalContainer directive. The ngbModalContainer directive marks the place in the DOM where modals are opened. Be sure to add somewhere under your application root element.

这就是我所缺少的，代码示例不包含模板中的 ngbModalContainer。

添加它解决了我的问题，现在模态弹出！

希望对大家有所帮助:)

Answer 2

自1.0.0-alpha.21(2017-03-15)起，ngbModalContainer为no longer used确定位置：

BREAKING CHANGES

model: The ngbModalContainer directive is no longer needed and was removed from this project. Just remove any references to the <template ngbModalContainer></template> from your projects.

相反，container 选项 was added, which defaults to <body>:

const containerSelector = options.container || 'body';
const containerEl = document.querySelector(containerSelector);

当将 Twitter Bootstrap CSS 限定到自己的组件（例如 <my-app>）而不是全局包含它时，由于缺少样式，模态看起来可能在您的应用程序下方打开。在那种情况下，显式设置容器：

this.modalService.open(myContent, {container: 'my-app'})

打不开最简单的Modal

Cannot open the simplest Modal

javascript

modal-dialog

bootstrap-modal

ng-bootstrap

angular

编辑：

更新：