Question

在实施一个简单的引导程序模态对话框时，我停留了一段时间，并在大约10个不同的页面中找到了答案。考虑到我无法快速找到答案，也没有明确地我想分享自己的解决方案来帮助他人。（下面的第一个答案）

如果您必须添加多种类型的引导小部件，建议您参考（https://ng-bootstrap.github.io/#/home）

Answer 1

在 src / index.html 中，我将body标签的内容更改为：

 <body>
    <app-root></app-root>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
    </script>
</body>

我在模版中为模态构建了一个单独的组件

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" (click)="showModal()">
  Open modal
</button>

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

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" (click)="hideModal()">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="sendModal()" >Send</button>
        <button type="button" class="btn btn-danger" (click)="hideModal()">Close</button>

        <!-- this button is hidden, used to close from typescript -->
        <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
      </div>
    </div>
  </div>
</div>

在打字稿中，我有

import { Component, OnInit } from '@angular/core';

// This lets me use jquery
declare var $: any;

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
  showModal():void {
    $("#myModal").modal('show');
  }
  sendModal(): void {
    //do something here
    this.hideModal();
  }
  hideModal():void {
    document.getElementById('close-modal').click();
  }
}

现在模态对话框可以工作了，它具有一个可以在其中添加一些附加逻辑的发送功能，以及一个从打字稿中关闭模态的隐藏功能

在angular7中实现引导模式对话框

1 个答案: