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

играет с NgbModal и хотите запустить метод open ->open(content: string | TemplateRef<any>, options: NgbModalOptions) <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!

8
angular modal-dialog ng-bootstrap

2 ответов

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

  • string
  • TemplateRef

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

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

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

9

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

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

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

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

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

modalReference: NgbModalRef; конструктор (частный modalService: NgbModal) { } этот.modalReference = это.modalService.открыть (ModelComponentName, {backdrop: 'static', size: 'lg', keyboard: false, centered: true});

1