如何隐藏和显示模式框在angular2

我用NG2模式，但它是没有得到打开或通过TS隐藏，我的模板，如何隐藏和显示模式框在angular2

<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>

我的TS，

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

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

来源

2016-11-10 Arnold

检查他们Gh的网页，他们有例子的https：// github上。com/pleerock/ng2-modal/tree/master/sample –

但是它没有如何从ts文件关闭或打开。 – Arnold

如果你使用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中使用模块加载器声明和导入模态组件。

来源

2016-11-10 07:32:38

嗨Bjom，我只想使用ng2模型，所以我只想渲染它。 – Arnold

那么如果你使用的是ng2模式，应该包含一些文档？你有原始的链接，你有组件/模块？ –

https://github.com/pleerock/ng2-modal – Arnold

我可以看到他使用两个公共职能的打开和关闭

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');

只需添加它是在你的方法。这样做的

来源

2016-11-10 10:30:58

更好的方法是：

模板侧：

<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();

来源

2017-04-03 09:59:09

如何隐藏和显示模式框在angular2

回答

相关问题