首页 文章

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

提问于
浏览 次
0

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

以下是我的代码片段..

<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中实现 . 有没有任何简单的解决方案 . 很抱歉提供不完整的代码，因为我无法做到 .

angular

1 回答

  • 1

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

    应该将“sessionState”服务注入到Modals中，因此可以访问它并可以将其用作交换数据的对象 .

    我希望它有所帮助

    回复于

相关问题