Angular 7 在打字稿中隐藏引导模式

MDBootstrap

关注

发信

关注(28)粉丝(399)

Angular 7 在打字稿中隐藏引导模式

本文介绍了Angular 7 在打字稿中隐藏引导模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在我的打字稿组件的一个功能中调用 (click)="basicModal.hide()" MDBootstrap Modal 的方法.我不知道如何从组件访问这个方法.

<h4 class="modal-title w-100" id="myModalLabel">模态标题</h4>

<div class="modal-body">...

<div class="modal-footer"><button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>关闭</button><button type="button" mdbBtn color="primary" class="relative wave-light" mdbWavesEffect>保存更改</button>

解决方案

你必须使用 Angular 的 @ViewChild 装饰器来定位 mdbModal 指令，然后使用 ModalDirective 类中的 hide() 方法.

请看下面的代码，这里解释了一切:

.html:

<h4 class="modal-title w-100" id="myModalLabel">模态标题</h4><div class="modal-body"><div class="md-form"><input type="text" class="form-control" id="input1" mdbInput><label for="input1">模态输入</label>
<div class="modal-footer"><button mdbBtn color="primary" mdbWavesEffect (click)="hideModal()">隐藏模态</button>

.ts:

 @ViewChild(ModalDirective) modal: ModalDirective;隐藏模态(){this.modal.hide();}

如果有什么不清楚的，欢迎再问！

I want to call (click)="basicModal.hide()" methode of MDBootstrap Modal inside one of my fuctions in my typescript component. I don't know how to access this method from component.

<button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>

<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
        <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save changes</button>
      </div>
    </div>
  </div>
</div>

解决方案

You have to use the Angular's @ViewChild decorator to target the mdbModal directrive, and then use the hide() method from ModalDirective class.

Please take a look at the below code, there's explained everything:

.html:

<button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>

<div #modal mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="md-form">
          <input type="text" class="form-control" id="input1" mdbInput>
          <label for="input1">Modal input</label>
        </div>
      </div>
      <div class="modal-footer">
        <button mdbBtn color="primary" mdbWavesEffect (click)="hideModal()">Hide modal</button>
      </div>
    </div>
  </div>
</div>

.ts:

 @ViewChild(ModalDirective) modal: ModalDirective;

  hideModal() {
    this.modal.hide();
  }

If there will be something unclear, feel free to ask again!

这篇关于Angular 7 在打字稿中隐藏引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-18 12:16