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来在后视图init钩子中关闭它，但是在加载时关闭模态窗口仍有一秒的延迟，可以看出。

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

Answer 1

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

你传递autostart选项没有[...]所以你试图传递给组件的值是一个字符串，并被解释为true。

默认情况下，[autostart]选项是false，因此您无需传递它。所有这些都已在library README中解释过了。

如README中所述，它等待一个布尔值，所以你必须传递它：[autostart]="false"（注意[]）。

Answer 2

@Sujata Chanda。非常感谢你。我能够找出问题所在。因此，默认情况下，即使我们将自动启动参数指定为false，也会加载模态。因此，必须在点击时启用模态。这与@Sujatha提供的相同。很少修改，以提供更多的方法控制

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

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