开放模态形式，包含从另一个 ngx 形式形式创建的表单

Question

我目前正在使用 ngx-formly 从 JSON 动态创建一堆 Angular 表单，效果非常好。我有一个特殊的用例，其中表单上的自定义按钮应该在单击时打开一个包含另一个表单的模式对话框，该对话框还将包含使用 ngx-formly 创建的表单。我在 ngx-formly 网站上看到的示例使用自定义按钮，并使用 .ts 文件创建自定义组件，但我想避免这种情况，因为我会有几个表单执行此操作，并且我不想为此创建不同的组件。

有没有办法从 ngx 形式形式触发模态对话框，以使用 ngx 形式形式显示模态，而无需为它们创建多个组件 (.ts( 文件？

Answer 1

具有动态数据的通用引导模型

• jQuery：https://stackblitz.com/edit/ngx-bootstrap-fh92s3 的示例

modal.service.ts

import {Injectable} from '@angular/core';
import {ModalModel} from './modal.model';
import {Subject} from "rxjs/Subject";
declare let $: any;
@Injectable()
export class ModalService {
modalData = new Subject<ModalModel>();
modalDataEvent = this.modalData.asObservable();
open(modalData: ModalModel) {
this.modalData.next(modalData);
$('#myModal').modal('show');
}
}

modal.component.ts

import { Component } from '@angular/core';
import { ModalService } from './modal.service';
import {ModalModel} from './modal.model';
declare let $: any;
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: [ './modal.component.css' ]
})
export class ModalComponent  {
modalData: ModalModel;
constructor(private modalService: ModalService) {
this.modalService.modalDataEvent.subscribe((data) => {
this.modalData = data;
})
}
}

从任何组件调用此服务

import { Component } from '@angular/core';
import { ModalService } from '../modal/modal.service';
import { ModalModel } from '../modal/modal.model';

declare let $: any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: [ './home.component.css' ]
})
export class HomeComponent  {
modelData = new ModalModel();
constructor(private modalService: ModalService) {
}
open() {
this.modelData.header = 'This is my dynamic HEADER from Home component';
this.modelData.body = 'This is my dynamic BODY from Home component';
this.modelData.footer = 'This is my dynamic footer from Home component';
this.modalService.open(this.modelData);
}
}

• 没有jQuery的例子，即使用ngx-bootstrap：https://stackblitz.com/edit/angular-ngx-bootstrap-modal