1

我基本上从ng-bootstrap Modal Documentaion复制了 Modal 示例,似乎我无法打开它。

当我点击按钮打开 Modal 时,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>

更新:

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

4

2 回答 2

6

小心!NgbModal 服务需要一个带有 ngbModalContainer 指令的容器元素。ngbModalContainer 指令标记 DOM 中打开模式的位置。请务必在您的应用程序根元素下添加某处。

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

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

希望它会对某人有所帮助:)

于 2016-09-04T10:18:21.547 回答
3

自 1.0.0-alpha.21 (2017-03-15) 起,ngbModalContainer不再用于确定位置:

重大变化

模型:ngbModalContainer不再需要该指令,并已从该项目中删除。只需<template ngbModalContainer></template>从您的项目中删除对 的任何引用。

相反,添加container了一个选项,默认为<body>

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

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

this.modalService.open(myContent, {container: 'my-app'})
于 2017-04-19T11:19:16.607 回答