Откройте ng-bootstrap Modal из Compontent

У меня есть компонент 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">&times;</span>
    </button>
  </div>
  <div class = "modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class = "modal-footer">
    <button type = "button" class = "btn btn-outline-dark" (click) = "c('Close click')">Close</button>
  </div>
</ng-template>

есть ли ошибка.?

Franklin Pious 01.05.2018 15:50
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
0
1
3 508
3

Ответы 3

Вам нужно это сделать.

  @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 для передачи модального содержимого этому компоненту

Вам необходимо создать отдельный модальный компонент и добавить его к компонентам ввода, чтобы он работал таким образом.

https://ng-bootstrap.github.io/#/components/modal/examples

Угловая 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?

bluejimmy 04.04.2021 16:02

Другие вопросы по теме