Angular - 打开一个模态作为单独的组件 - 不使用 ng-modal答案

【问题标题】：Angular - Open a modal as separate component - without using ng-modalAngular - 打开一个模态作为单独的组件 - 不使用 ng-modal
【发布时间】：2020-03-20 00:39:00
【问题描述】：

我有组件B，其中 HTML 有模态引导代码。从ComponentA，我需要打开componentA中的componentB。

弹出窗口未显示在 UI 中。检查页面时，组件正在加载，但未在 UI 中显示。

<app-root> 
  <app-a>
    <app-b></app-b>
  </app-a>
</app-root>

注意：我在两个组件中都没有任何 CSS

组件A.html：

<button (click)="popup()">Open</button>
<app-b *ngIf="openModal" [openModal]="true" ></app-b>

ComponentA.ts：

 popup(){
    this.openModal = true;
  }

componentB.html：

<div *ngIf="openModal" 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">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

componetb.ts：

@Input('openModal') openModal : boolean

提前致谢。

【问题讨论】：

您能描述一下您面临的问题吗？
UI 中不显示弹出窗口。检查页面时，组件正在加载，但未在 UI 中显示。 // 这是加载的。

标签： angular typescript

【解决方案1】：

要使模态可见，请添加 show 和 d-block 类。

在 componentB.html 中将模态 div 更改为：
<div *ngIf="openModal" id="myModal" class="modal fade show d-block" role="dialog">

stackblitz

但坚持住
这不是模态应该如何工作的。我建议改用ngx-bootstrap 或查看official documentation 以更好地操作类。

【讨论】：

【解决方案2】：

您可以将常规组件用作模态，创建您的组件例如 ModalComponent，在构造函数中您需要添加此变量：public activeModal: NgbActiveModal

您可以使用此指令关闭已打开的 Modal this.activeModal.close() 在调用者/父组件中添加这两个变量对模态组件modalRef: NgbModalRef的引用

并在构造函数中添加这个变量private modalService: NgbModal 你可以像这样调用模态组件this.modalRef = this.modalService.open(ModalComponent); 你可以像这样this.modalRef.componentInstance.variable = variableContent;

将任何变量传递给 Modal 组件

不要忘记在 app.module entryComponents: [ModalComponent] 的 entryComponents 数组中添加 Modal 组件

【讨论】：

我不知道他是否在使用那个库，但如果他不是，他应该是