没有 ng-template 的 Angular ngx-bootstrap 模型

Question

我想将 bootstrap 中的模态放入我的应用程序中。对我来说，自己设计模型很重要。使用 ng-template 的 ngx-bootstrap 示例是不可能做到这一点的。有没有更好的解决方案而不是这个？？？

<ng-template #template>  
    <div class="modal-header-custom">  
      <h4 class="modal-title pull-left">Modal</h4> 
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">  
        <span aria-hidden="true">×</span>  
      </button>  
   </div>
   <div class="modal-body"></div>
</ng-template>

Answer 1

基本上你可以做的是生成自定义 Angular 模态组件作为具有所需外观和样式的包装器。
示例 HTML 组件:

<div class="custom-modal">
    <div class="custom-modal-body">
        <ng-content></ng-content> <!--used for content projection-->
    </div>
</div>
<div class="custom-modal-background"></div>

之后，您生成模态服务，以便它可以在单击时添加和删除模态。例如:

export class ModalService {
    private modals: any[] = [];

    add(modal: any) {
        this.modals.push(modal);
    }

    remove(id: string) {
        this.modals = this.modals.filter(x => x.id !== id);
    }

    open(id: string) {
        const modal = this.modals.find(x => x.id === id);
        modal.open();
    }

    close(id: string) {
        const modal = this.modals.find(x => x.id === id);
        modal.close();
    }
}

完成服务后，您可以生成一些组件，这些组件将作为包装器模态组件的包装器，其中将使用内容投影。例如:

<custom-modal id="custom-modal-1">
    <h1>A Custom Modal!</h1>
    <p>Home page text: <input type="text" [(ngModel)]="bodyText" /></p>
    <button (click)="closeModal('custom-modal-1');">Close</button>
</custom-modal>

这是创建自定义模态表单的最简单形式，我建议您将它与某种 Angular Material 类型一起使用，因为在自定义实现后模态很难处理。
有关完整示例，请参阅此 stackblitz:
https://stackblitz.com/edit/angular-custom-modal-custom
我希望这会帮助你，快乐编码