ng-bootstrap - свойства контейнера для модального компонента - PullRequest
Новая
       18

ng-bootstrap - свойства контейнера для модального компонента

0 голосов
/ 30 августа 2018

На сайте ng-bootstrap, Modal component -> Api есть информация о том, что модал имеет свойства conatainer с описанием: "An element to which to attach newly opened modal windows". Означает ли это, что я могу прикрепить открытый модал непосредственно к указанному элементу div id на моем HTML-сайте?

Если это так, как добиться этого в 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)

Не могли бы вы помочь мне, пожалуйста?

1 Ответ

0 голосов
/ 30 августа 2018

При указании элемента контейнера вам нужно передать либо элемент, либо селектор, либо их комбинацию. В вашем случае вы хотите достичь элементов с идентификатором теста. Для свойства контейнера должно быть установлено значение "#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)}`;
});
...