Question

我有componentB，其中HTML具有模态引导代码。在ComponentA中，我需要在componentA中打开componentB。

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

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

注意：两个组件中都没有CSS

ComponentA.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

谢谢。

Answer 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来更好地操纵类。

Answer 2

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

您可以使用此指令来关闭打开的模态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 Array中添加Modal组件。

角度-将模态作为单独的组件打开-不使用ng-modal

2 个答案: