如何将两个模态并排显示并在角度2中同时相互交互?

时间:2017-03-14 05:12:16

标签: angular

我有一个有形式的模态。在某一点上,我需要显示另一个模式供用户选择项目并使用所选项目更新第一个模态的视图。我怎样才能做到这一点。我必须同时显示两个模态。

以下是我的代码片段..

<button class="btn btn-primary btn-xs" (click)="openContactModal()">Add
         Contact</button>
<modal #myModal
   modalClass="modal-md"
   [closeOnEscape]="false"
   [closeOnOutsideClick]="false"
   [hideCloseButton]="true"
>
 <modal-header>
  <h6>Contact</h6>
 </modal-header>

  <modal-content>

   <button class="btn btn-primary btn-xs"   (click)="openContactModal2()">TestModal2</button>

     </modal-content>

<modal #myModal2
   modalClass="modal-md"
   [closeOnEscape]="false"
   [closeOnOutsideClick]="false"


 <modal-content>


   <ul *ngFor="let type of types">
     <li>{{type}}</li>

  </ul>
    <p> I am in modal two  and I will select types though they are list   here</p>

选择的类型应该在其他模态

中看到              

我的组件确实从代码中打开了两个模态:

@ViewChild('myModal') myModal: Modal;
@ViewChild('myModal2') myModal2: Modal;

openContactModal() {
    this.myModal.open();
  }

openContactModal2(types) {
  this.myModal2.open(types);
 }

问题是,一旦我打开模态2,1就会关闭。我用jquery解决了这个问题     this。但我不确定在角度2中实现。有没有任何简单的解决方案。很抱歉提供不完整的代码,因为我无法做到。

1 个答案:

答案 0 :(得分:1)

一种方法是使用'sessionState'服务来存储需要在2个模态之间传递的数据。

'sessionState'服务应注入Modals,因此可以访问它并可以将其用作交换数据的对象。

我希望它有所帮助