Angular 2+自定义modal模态组件 - angular-custom-modal

Angular 2+自定义modal模态组件 - angular-custom-modal
插件名称 angular-custom-modal
发布时间 2020年7月26日
插件作者 zurfyx

一个不错的Angular2 +模态窗口和对话框组件,带有内部组件支持。

特征:

  • 轻:没有附加CSS / JS框架
  • Bootstrap CSS兼容
  • 自定义模态标题,正文和标题
  • 模态堆叠支持
  • 惰性内部组件初始化,以及  ngOnDestroy在关闭模式时的(ed)
  • 模态可见时禁用父级滚动

安装:

npm install angular-custom-modal

用法

app.module.ts

imports: [
  ...
  ModalModule,
  ...
],
...
})

原始HTML

app.component.html

<button (click)="htmlInsideModal.open()">原始HTML内部模式</button>
<modal #htmlInsideModal>
  <ng-template #modalHeader><h2>HTML内模态</h2></ng-template>
  <ng-template #modalBody>
    <p>模态内HTML内容</p>
  </ng-template>
</modal>

模态内的组件

my-component.component.ts

@Component({
  selector: 'app-my-component',
  templateUrl: 'my-component.component.html',
})
export class AppModalContentComponent { }

my-component.component.html

<p>我的组件的HTML</p>

app.component.html

<button (click)="componentInsideModal.open()">内部组件模态</button>
<modal #componentInsideModal>
  <ng-template #modalHeader><h2>内部组件模态</h2></ng-template>
  <ng-template #modalBody>
    <app-my-component></app-my-component>
  </ng-template>
  <ng-template #modalFooter></ng-template>
</modal>

嵌套模态

app.component.html

<modal #nestedModal>
  <ng-template #modalHeader><h2>嵌套模态</h2></ng-template>
  <ng-template #modalBody>
    Nested modals can be created by simply adding a <modal> inside a <modal>
    ...
    <button (click)="nestedModalX.open()">打开嵌套的模态</button>
    <modal #nestedModalX>
      <ng-template #modalBody>这是嵌套的模态内容。</ng-template>
    </modal>
  </ng-template>
</modal>