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

Играя с 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)}`;
    });
}

Код работает без ошибок, а модальный открывается так: Модальный без визуализированного контента ... это не совсем то, что я хочу!

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

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!

Ответы

Ответ 1

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

  • string
  • TemplateRef

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

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

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

Ответ 2

Теперь вы можете сделать следующее...

Допустим, у вас есть компонент модели. Подтвердите модель, которую хотите использовать в любом другом компоненте.

  1. ModelComponentName добавлено в разделы объявлений и entryComponent в module.ts
  2. Не забудьте добавить NgbModule.forRoot() в импорт файла вашего модуля, который содержит объявления, которые вы упомянули выше.

  3. Убедитесь, что шаблон компонента вашей модели находится внутри тега div, а не тег ng-template.

Затем вы можете использовать следующий метод open из любого другого компонента.

modalReference: NgbModalRef;
constructor(private modalService: NgbModal) { }
this.modalReference = this.modalService.open(ModelComponentName, {backdrop: 'static',size: 'lg', keyboard: false, centered: true});