У меня есть компонент angular5, который должен запускать загрузочную модель для открытия. Он хорошо работает с использованием кнопки, но нет четкой документации api о том, как программно открыть модальный ng-bootstrap (bootstrap 4) внутри компонента.
образец-modal.ts
constructor(private modalService: NgbModal) {}
open(content){
this.modalService.open(content);
}
sample-modal.html
<ng-template #content let-c = "close" let-d = "dismiss">
<div class = "modal-header">
<h4 class = "modal-title">Modal title</h4>
<button type = "button" class = "close" aria-label = "Close" (click) = "d('Cross click')">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body">
<p>One fine body…</p>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-outline-dark" (click) = "c('Close click')">Close</button>
</div>
</ng-template>






Вам нужно это сделать.
@ViewChild('content') content : any;
modalRef: BsModalRef;
private modalConfig: ModalOptions = {
backdrop: 'static',
keyboard: true,
class: 'modal-md',
};
show() {
this.modalRef = this.modalService.show(this.content, this.modalConfig);
}
hide() {
this.modalRef.hide();
}
даже вы можете сделать его отдельным повторно используемым компонентом и использовать ng-content для передачи модального содержимого этому компоненту
Вам необходимо создать отдельный модальный компонент и добавить его к компонентам ввода, чтобы он работал таким образом.
Угловая 9 версия
Шаблон
<ng-template #myModal let-modal>
<h1>My Modal</h1>
</ng-template>
Составная часть
@ViewChild('myModal') myModal : any;
openModal() {
this.modalService.open(this.myModal);
}
Что означает let-modal в ng-template? Я видел это только как let-id = "myId"? Что означает let-modal в ng-template?
есть ли ошибка.?