时间戳

首页 > 解决方案 > ng-bootstrap - 模态组件上的容器属性

angular - ng-bootstrap - 模态组件上的容器属性

问题描述

在 ng-bootstrap 站点上，Modal component->Api有一条信息表明 modal 具有conatainer带有描述的属性：“ An element to which to attach newly opened modal windows”。这是否意味着我可以将打开的模式直接附加到我的 HTML 网站上指定的 div id 元素？

如果是这样，如何在 Angular 项目中实现这一点？在我的项目中，我在 modal-basic.html 中添加了以下代码：

<div id="test" class="col-6">Some text</div>

并添加了属性容器：

this.modalService.open(content, {container: 'test',ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {

  this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

但我收到一个错误：

NgbdModalBasic.html:28 ERROR Error: The specified modal container "test" was not found in the DOM.
    at NgbModalStack.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModalStack.open (ng-bootstrap.js:6417)
    at NgbModal.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModal.open (ng-bootstrap.js:6681)
    at NgbdModalBasic.push../src/app/modal-basic.ts.NgbdModalBasic.open (modal-basic.ts:16)
    at Object.eval [as handleEvent] (NgbdModalBasic.html:28)
    at handleEvent (core.js:10258)
    at callWithDebugContext (core.js:11351)
    at Object.debugHandleEvent [as handleEvent] (core.js:11054)
    at dispatchEvent (core.js:7717)
    at core.js:8161
    at HTMLButtonElement.<anonymous> (platform-browser.js:995)

请问你能帮帮我吗？

标签： angularng-bootstrapngx-bootstrapng2-bootstrap

解决方案

指定容器元素时，您需要传入元素或选择器或两者的组合。在您的情况下，您希望访问 ID 为 test 的元素。容器属性应设置为“#test”。

this.modalService.open(content, {container: '#test',ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {

  this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

推荐阅读