0

我正在尝试在我的 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);
}

控制台日志给了我错误，但模式在加载时显示。我尝试在 after view init 钩子中关闭它，但在加载时关闭模态窗口仍有一秒钟的延迟，这可以看出。

非常感谢你们的任何帮助。

4

2 回答 2

0

@Sujata Chanda。非常感谢。我能够找出问题所在。因此，默认情况下，即使我们将自动启动参数指定为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;
}
于 2018-08-16T12:06:46.983 回答
0

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

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

默认情况下，[autostart]选项是false，因此您不需要传递它。所有内容都已在库 README中进行了解释。

正如自述文件中所说，它等待一个布尔值，所以你必须像这样传递它：（[autostart]="false"注意[]）。

于 2018-09-10T13:01:49.870 回答