Модальный в Angular6

Question

Я пытаюсь использовать ngx-smart-modal в своем приложении Angular для отображения модального click, Проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что после загрузки представления компонента модальное изображение отображается при загрузке.

В документации указано указать "autostart" =false не загружать модальный при инициализации компонента, но это, кажется, не работает

Вот мой вид шаблона

 <!-- Trigger/Open The Modal -->

 <button id="myBtn" class="btn btn-primary"  
 (click)="openModal($event)" >Open Modal</button>

  <ngx-smart-modal  #myModal (onOpen)="modalOpened($event)"
       identifier="myModal"  autostart="false">
       <h1>Title</h1>
       <p>Some stuff...</p>
       <button (click)="closeEvent($event)">Close</button>
  </ngx-smart-modal>

Я не могу получить обработчик в конструкторе или ngOnit крючки жизненного цикла и может получить обработчик только в ngAfterViewInit() и к тому времени модал загружается.

ngAfterViewInit(){
this.smartModalService.get('myModal').close();
  console.log('after view modalstack' 
  ,this.smartModalService.get('myModal').autostart);
}

Журнал консоли выдает мне false, но все же модальный режим отображается при загрузке. Я попытался взломать его, чтобы закрыть его в обработчике инициализации после просмотра, но все еще существует задержка в секунду при закрытии модального окна при загрузке, и это видно.

Любая помощь от вас, ребята, очень ценится.

Answer 1

Вам не нужно делать весь этот код, чтобы избежать автозапуска, ваша проблема скорее связана с привязкой шаблона.

Вы передаете autostart вариант без [...] поэтому значение, которое вы пытаетесь передать компоненту, является строкой и интерпретируется как true,

По умолчанию [autostart] вариант falseтак что вам не нужно передавать его. Все уже объяснено в библиотеке README.

Как сказано в README, он ожидает логическое значение, поэтому вы должны передать его следующим образом: [autostart]="false" (обратите внимание на []).

Answer 2

@ Суджата Чанда. Большое спасибо. Я смог выяснить проблему. Таким образом, по умолчанию модал загружается, даже если мы указываем параметр автозапуска как false. Таким образом, нужно просто включить модальный по клику. Это тот же ответ, который предоставлен @Sujatha. Немного изменены, чтобы дать больше контроля над методом

 <ngx-smart-modal  #myModal
   identifier="myModal"  autostart="false">
   <h1>Title</h1>
   <p>Some stuff...</p>

Теперь, когда опция автоматического запуска указана в представлении, по умолчанию она принимается за истину независимо от того, какое значение мы передаем. Это происходит по крайней мере в angular6. Поэтому удалите спецификацию и просто привяжите ngx-smart-modal к такому действию

 <button id="myBtn" class="btn btn-primary"  (click)="openModal($event)" >Open 
     Modal</button>

Теперь в компоненте вы можете открыть модальный

openModal(event){
  console.log('opne modal clicked', event.target, '--');
  this.smartModalService.getModal('myModal').toggle();
  // this force the modal to be opened even if clicked outside .User has to 
  press cancel button or close
  this.smartModalService.getModal('myModal').escapable=false;
  this.smartModalService.getModal('myModal').dismissable =false;
  this.smartModalService.getModal('myModal').closable =false;
  this.smartModalService.getModal('myModal').hideDelay = 7;
}