Question

我正在使用引导程序模态，但是当我将其从代码隐藏中隐藏时，它显示以下错误。

我正在使用angular6。

代码

<div #exampleModal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">

  @ViewChild('exampleModal') public exampleModal: ElementRef;

 this.exampleModal.hide();

错误消息

错误TypeError：this.exampleModal.hide不是函数

Answer 1

您可以在模式对话框中添加关闭按钮HTML，并添加模板变量#closebutton

在ts代码中，您调用this.closebutton.nativeElement.click();以关闭模式对话框。

HTML

<div class="container">
  <h2>Modal Close</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" #closebutton class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <p>Content here</p> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" id="closeModal"  (click)="onSave()">Save</button>
         </div> 
      </div>
    </div>
  </div>

</div>

TS

export class AppComponent implements OnInit {
  @ViewChild('closebutton') closebutton;

  constructor(private fb: FormBuilder) { }

  public ngOnInit() {

  }

  public onSave() {
    this.closebutton.nativeElement.click();
  }
}

演示https://stackblitz.com/edit/angular-close-bootstrap-modal?file=src/app/app.component.html

更新：

我还有另一种解决方案，没有关闭按钮的窍门。

第一步，您需要通过jquery命令安装bootstrap和npm。

第二步，您需要在组件中添加declare var $ : any;

并且可以使用$（'＃myModal'）。modal（'hide'）;在onSave（）方法上

演示https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Answer 2

对此，我还有另一种选择，它很简单并且对我有用。

E.x：这是HTML文件中的模型代码。

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" id="closeModel">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <!-- Do your stuff -->
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>


  </div>
</div>

现在在.ts文件中要关闭模式的位置，只需使用jquery。

注意：您需要为此安装jquery并需要导入文件。

现在点击close上的jquery.按钮

$(document).ready(function(){    
    $("#closeModel").click();  // That's it... Model will close. 
});

Answer 3

这是我的解决方案：

html：

<div class="modal fade" id="myModal" role="dialog" #myModal>
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <p>Content here</p> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" id="closeModal"  (click)="onSave()">Save</button>
         </div> 
      </div>
    </div>
  </div>

ts：

export class AppComponent implements OnInit {
  @ViewChild('myModal', { static: false }) myModal: ModalDirective;

  constructor(private fb: FormBuilder) { }

  public ngOnInit() {

  }

  public onSave() {
    this.myModal.hide();
  }
}

Answer 4

您可以使用ngx-bootstrap modal来从Code控制模式。 https://valor-software.com/ngx-bootstrap/#/modals

如何在角度隐藏引导模态

4 个答案: