在 Angular 2 中使用引导弹出模式答案

【问题标题】：Using bootstrap popup modal in Angular 2在 Angular 2 中使用引导弹出模式
【发布时间】：2018-02-02 12:27:35
【问题描述】：

有没有办法在我的 Angular 2 应用程序中使用弹出模式而不安装已知的软件包，如 ng2-opd-pop 和其他？

我已经在我的 styles.css 中导入了 bootstrap @import '../../../Content/bootstrap.css';

（尝试了 ng2-opd-pop 并得到大量错误）

【问题讨论】：

你可以看看this question。

标签： angular twitter-bootstrap modal-dialog

【解决方案1】：

所以基本上使用 3 方 UI 组件有时是一项艰巨的任务，如果您不导入或者在导入它们时失败了一些步骤。

如果您想使用任何 3 方 UI 组件，请完全按照他们显示的指南或步骤操作。

如果你想使用弹出功能，你可以选择angular material，它是 Angular 本身的官方 UI 库。

如果你想要更多花哨的组件，你可以看这里PrimeNg

如果您希望自己创建弹出窗口或对话框只是为了显示信息，您可以添加 HTML 代码，并且可以通过编程方式显示和隐藏 div。

【讨论】：

【解决方案2】：

如果您在应用程序中安装了 bootstrap 4，请尝试此操作。

app.component.html

<button type="button" (click)="openModel()">Open Modal</button>

<div #myModel class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
        <h5 class="modal-title ">Title</h5>
        <button type="button" class="close" (click)="closeModel()">
            <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
    </div>
  </div>
</div>

app.component.ts

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

@ViewChild('myModal') myModal;

openModel() {
  this.myModal.nativeElement.className = 'modal fade show';
}
closeModel() {
   this.myModal.nativeElement.className = 'modal hide';
}

【讨论】：