没有ng-template的有角ngx-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>

解决方法

基本上，您可以做的是生成具有所需外观和样式的自定义角度模态分量作为包装。

示例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类型配合使用，因为模态在自定义实现后可能难以处理。

有关完整示例，请参见以下堆栈闪电战：

https://stackblitz.com/edit/angular-custom-modal-custom

希望这对您有所帮助，祝您编程愉快

如果您想从根本上重新设置样式（重新设置主题）的样式，我将研究将不同的CSS样式应用于特定于样式的类。看一下SCSS源，以确定您需要定位的类：

https://github.com/twbs/bootstrap/blob/main/scss/_modal.scss

angular angular ngx-bootstrap