Программно открыть модальное окно ng-bootstrap

У меня есть угловая 4-я страница, включая модальный ng-bootstrap. Мой код выглядит так.

foo.html

[...]
<button class="btn btn-sm btn-secondary material-icons"
(click)="open(content)">search</button>

<ng-template #content let-c="close" let-d="dismiss">
    content in here
</ng-template>
[...]

foo.ts

[...]
constructor(private modalService: NgbModal) { }
[...]
open(content) {
   let options: NgbModalOptions = {
     size: 'lg'
   };

   this.modalService.open(content, options);
}
[...]

Теперь, когда я нажимаю кнопку, открывается модальное окно. Сейчас я хочу открыть модель на ngChanges.

ngOnChanges(changes: any) {
   open(content)
}

Моя проблема: как мне получить здесь «контент»? Есть ли способ получить ng-template программно? Заранее спасибо!


typescript angular modal-dialog ng-bootstrap ng-template
person Christian Riese    schedule 16.07.2017    source источник

Ответы (2)


arrow_upward
37
arrow_downward

Чтобы получить доступ к элементу content внутри класса, объявите:

@ViewChild('content', { static: false }) private content;
                         ^for Angular8+

и добавьте соответствующий импорт вверху класса:

import { ViewChild } from '@angular/core';

и, наконец, вызовите метод open для этого элемента при обнаружении изменений:

ngOnChanges(changes: any) {
   this.open(this.content);
}
person Vega    schedule 16.07.2017

arrow_upward
1
arrow_downward

из Angular 8 вы также должны передать статический параметр: {static: false} в ViewChild

import { ViewChild } from '@angular/core';

@ViewChild('content', { static: false }) private content;

constructor(private modalService: NgbModal) { }

this.modalService.open(this.content);
person Ivan Bagaric    schedule 06.08.2020