Лучшая практика для вызова метода открытого метода NgbModal

Question

Играя с NgbModal и хотите вызвать открытый метод ->open(content: string | TemplateRef<any>, options: NgbModalOptions) < - из где-то еще, кроме кода шаблона. В моем случае я хочу передать строку в качестве параметра при запуске метода в файле .ts моего компонента. При запуске метода с помощью кнопки в html-файле так: <button (click)="open(content)">Launch demo modal</button>, код отлично работает, конечно, со всем кодом из <template></template> в html-файле.

Попытка сделать что-то с этим:

logoutScreenOptions: NgbModalOptions = { 
    backdrop: 'static', 
    keyboard: false 
}; 

lockedWindow: NgbModalRef; 

lockedScreenContent= ` 
    <template #content let-c="close" let-d="dismiss"> 
     <div class="modal-header" style="text-align: center"> 
      <h3 class="modal-title">Title</h3> 
     </div> 
     <div class="modal-body"> 
      <p>Body</p> 
     </div> 
     <div class="modal-footer"> 
      <p>Footer</p> 
     </div> 
    </template> 
`; 

openLockedScreen(){ 
    this.open(this.lockedScreenContent); 
} 

open(content) { 
    console.log(content); 
    this.lockedWindow = this.modalService.open(content, this.logoutScreenOptions); 
    this.lockedWindow.result.then((result) => { 
     this.closeResult = `Closed with: ${result}`; 
    }, (reason) => { 
     this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
    }); 
} 

код работает без ошибок, и модальный открывается следующим образом: Modal without rendered content ... который не то, что я хочу!

Также попробовал, как это, с точно таким же результатом:

lockedScreenContent= ` 
    <div class="modal-header" style="text-align: center"> 
     <h3 class="modal-title">Title</h3> 
    </div> 
    <div class="modal-body"> 
     <p>Body</p> 
    </div> 
    <div class="modal-footer"> 
     <p>Footer</p> 
    </div> 
`; 

Что мне не хватает? Нельзя ли просто передать строку как параметр «content»?

Не могу понять, как использовать параметр templateRef из файла ts!

Answer 1

На сегодня openhttps://ng-bootstrap.github.io/#/components/modal имеет следующую подпись: open(content: string | TemplateRef<any>, options: NgbModalOptions). Как вы можете видеть из этой подписи вы можете открыть модальное предоставление как:

• string
• TemplateRef

string -typed аргумент не очень интересно - на самом деле это было в основном добавляет к вспомогательная отладка/модульное тестирование. Используя его, вы можете пройти ... ну, текст, без разметки, а не угловые директивы. Таким образом, это действительно инструмент отладки, а не то, что полезно в реальных сценариях.

Аргумент TemplateRef более интересен, так как он позволяет передавать директивы разметки + для отображения. Вы можете получить руку на TemplateRef, выполнив <template #refVar>...content goes here...</template> где-нибудь в вашем шаблоне компонента (шаблон компонента, из которого вы планируете открыть модальный). Таким образом, аргумент TemplateRef является мощным, так как он позволяет иметь разметку, директивы, другие компоненты и т. Д. Недостатком является то, что TemplateRef полезен, только если вы открываете модальный компонент из компонента с шаблоном.

У меня создалось впечатление, что вы ищете функцию, которая планируется, но еще не реализована - возможность открытия модального компонента с типом компонента в качестве содержимого. Он будет работать следующим образом: modalService.open(MyComponentWithContent). Как я уже говорил, это часть дорожной карты, но пока не реализована. Вы можете отслеживать эту функцию, следуя https://github.com/ng-bootstrap/ng-bootstrap/issues/680