Question

我使用了ng2模式，但它没有被打开或通过ts隐藏，我的模板，

    <modal  id='saveeditsmodal'>
  <modal-header>
        <h4 class="modal-title">Editing item(s) in Recently Viewed</h4>
       </modal-header>
      <!-- Modal content-->
      <modal-content>
        <div class="modal-body">
          <p>You have unsaved changes.</p>
        </div>
         <div class="modal-body">
          <p>Are you sure you want to discard these changes?</p>
        </div>
               </modal-content>
     <modal-footer>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Stay On List</button>
          <button type="button" class="btn btn-default" data-dismiss="modal" (click)='closebox()'>Discard</button>
  </modal-footer>
  </modal>

我的，

$('#saveeditsmodal').show();

实际上这是ng2模型，我不确定隐藏或显示的过程，任何人都可以建议帮助。谢谢。

Answer 1

如果你正在使用Angular2，你应该尽量避免使用jQuery。

如果您实际使用的是ng2-bootstrap模块，它提供了一个不错的模态组件，您应该考虑执行以下操作。

创建自己的模态实现，从ng2-bootstrap扩展现有的ModalModule。

只能使用*ngIf="variableName"显示它，例如你可以这样做：

function show() {
  this.variableName = true
}

作为组件的一部分。

然后在要使用模态的组件中，添加ViewChild，如下所示：

@ViewChild('componentID') modalCmp: ModalComponent

您的HTML可能如下所示：

<modal #componentID></modal>

您可以通过向其添加@Input()和@Output()变量来完全扩展和升级您的组件，以操纵它的行为。

在您的代码/组件中，您可以参考modalCmp。例如：

function showMyModal() {
  this.modalCmp.show()
}

如果您有任何其他问题，请随时提出。不要忘记使用Angular2中的模块加载器声明和导入模态组件。

Answer 2

我可以看到他正在使用两个公共函数来打开和关闭

 open(...args: any[]) {
        if (this.isOpened)
            return;

        this.isOpened = true;
        this.onOpen.emit(args);
        document.body.appendChild(this.backdropElement);
        window.setTimeout(() => this.modalRoot.nativeElement.focus(), 0);
        document.body.className += " modal-open";
    }

    close(...args: any[]) {
        if (!this.isOpened)
            return;

        this.isOpened = false;
        this.onClose.emit(args);
        document.body.removeChild(this.backdropElement);
        document.body.className = document.body.className.replace(/modal-open\b/, "");
    }

您可以尝试直接与模态进行交互：

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

只需按照您的方法添加它。

Answer 3

更好的方法是：

模板面：

<modal  id='saveeditsmodal' #saveEditModal>
.....
</modal>

<button (click)='saveEditModal.open()'>Show Modal</button>
<button (click)='saveEditModal.close()'>Hide Modal</button>

组件方：

@ViewChild('saveEditModal') saveEditModal;
......
this.saveEditModal.open();
this.saveEditModal.close();

如何在angular2中隐藏和显示模态框

3 个答案: