Angular6 中的模态

Question

我正在尝试在我的 Angular 应用程序中使用 ngx-smart-modal 在 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);
}

控制台日志显示错误，但模式在加载时显示。我尝试了一个 hack 在 after view init 挂钩中关闭它，但是在关闭模式时仍然有一秒钟的延迟 window 并且可以看到。

非常感谢你们的帮助。

Answer 1

@Sujata Chanda。非常感谢你。我能够找出问题所在。所以默认情况下，即使我们将 autostart 参数指定为 false，模态也会被加载。因此，只需在单击时启用模态。这与@Sujatha 提供的答案相同。稍作修改以更好地控制方法

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

现在，当在视图中指定自动启动选项时，默认情况下，无论我们传入什么值，它都被视为 true。这至少在 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;
}

Answer 2

您不需要执行所有此类代码来避免自动启动，您的问题更多是模板绑定问题。

您传递的 autostart 选项没有 [...]，因此您尝试传递给组件的值是一个字符串，并被解释为 true。

默认情况下，[autostart]选项是false，所以你不需要传递它。一切都已在 library README.

中进行了解释

如 README 中所述，它等待一个布尔值，因此您必须像这样传递它：[autostart]="false"（注意 []）。

Angular6 中的模态

Modal in Angular6

modal-dialog

ngx-modal

angular