Angular ng引导-模态组件上的容器属性

在ng引导站点上，

Modal组件

->

Api

有一条信息，说明Modal具有属性

conatainer

，其描述为：“

要将新打开的Modal窗口附加到的元素

”。这是否意味着我可以将打开的模式直接附加到HTML站点上指定的div id元素

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

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

但我收到一个错误：

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)

NgbdModalBasic.html:28错误：在DOM中找不到指定的模式容器“test”。
在NgbModalStack.push../node_modules/@ng bootstrap/ng bootstrap/fesm5/ng-bootstrap.js.NgbModalStack.open（ng bootstrap.js:6417）
在NgbModal.push../node_modules/@ng bootstrap/ng bootstrap/fesm5/ng-bootstrap.js.NgbModal.open（ng bootstrap.js:6681）
在NgbdModalBasic.push../src/app/modal-basic.ts.NgbdModalBasic.open处（modal-basic.ts:16）
在Object.eval[as handleEvent]（NgbdModalBasic.html:28）
在handleEvent（core.js:10258）
在callWithDebugContext上（core.js:11351）
在Object.debugHandleEvent[作为handleEvent]（core.js:11054）
在dispatchEvent（core.js:7717）
在core.js:8161
在HTMLButtoneElement。（platformbrowser.js:995）

---

您能帮助我吗？

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

---

您好，谢谢您的回复。现在显示的是模态，但始终在同一个位置。它没有附加到元素。我从这个站点获取示例代码：我创建了这个stackblitz:，如果您在打开模态时检查id为test的div，模态将显示在其中。好的，我明白了。还有一个问题。如何操作此模态以显示它们特别是在容器元素中？例如在“test”元素的左侧？而是使用一个popover，我相信你可以为popover内容使用一个模板。以这种方式使用模态的问题在于它不是设计在元素旁边的。因此，你必须编辑CSS，使其显示在所需元素旁边是的。

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)

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