Question

我有一个bootstrap模式，我想在显示或隐藏时调用函数。可能吗？我尝试了焦点/模糊。这些工作，但根据您点击的位置多次触发。

当显示或隐藏模态时，是否还有其他一次我可以调用的事件？

<button class="btn btn-primary video-btn"
            data-toggle="modal"
            type="button"
            data-target="#myModal">Open Modal</button>

  <div class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-hidden="true"
      (focus)="modalShown()"
      (blur)="modalHidden()">Other content in here</div>

Answer 1

如果你使用ngx-bootstrap，你可以在.ts中定义和使用show / hide模态函数

.TS

found : Playground.this.Foo[[X],A]

html的

import {Component, ViewChild} from '@angular/core';
import {ModalDirective} from 'ngx-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('childModalTest')
  public childModalTest:ModalDirective;
  public showChildModalOpen():void {
    this.childModalTest.show();
  }

  public showChildModalClose():void {
    this.childModalTest.hide();
  }
}

https://valor-software.com/ngx-bootstrap/#/modals会有所帮助：）

Answer 2

我肯定会建议您迁移到ng-bootstrap并使用更直观的模态。 ngbootstrap modal tutorial

但是，如果没有我会建议使用主题发出和听取开放的近距离事件。这是一个关于如何使用rxjs主题rxjs Subjects tutorial

的好视频

设置主题后，修改你的函数，modalShown（）和modalHidden（），以包含一个主题＆＃34; next＆＃34;触发模态打开/关闭之前的事件。

import { Subject } from 'rxjs/Subject';

modalOpen(){
    this._mySubject.next("open");
    yourBootstrapModal.open();
}

然后订阅活动并开展工作

this.mySubject.subscribe(message=>{
    if(message === "open")
    {
        doWork....
    }
}

上面的代码是手写的，但会让你到达你需要去的地方。

祝你好运！

显示/隐藏Bootstrap 4模式角度模式？

2 个答案: