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>

UPDATE：

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

Answer 1

抬起头来！ NgbModal服务需要一个带有ngbModalContainer指令的容器元素。 ngbModalContainer指令标记DOM中打开模态的位置。请务必在应用程序根元素下添加某个位置。

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

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

希望它对某人有帮助:)）

Answer 2

自1.0.0-alpha.21（2017-03-15）起，ngbModalContainer为no longer used以确定排名：

突破变化

model：不再需要ngbModalContainer指令，并从该项目中删除。只需从项目中删除对<template ngbModalContainer></template>的任何引用。

取而代之的是container选项was added，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'})

无法打开最简单的模态

编辑：

UPDATE：

2 个答案: