如何在angular 2中在同一模态中处理多个动态组件？

我正在制作一个平台，用户可以从一组输入表单中进行选择。每个表单的内容和提交处理（API调用等）是不同的，但它周围的用户界面是相同的：它应该在模式窗口中打开，并且它有一个带有自动保存消息和提交按钮的浮动底栏

当然，我想重复使用模态逻辑。我已经遇到了很多事情。我该怎么做

• 制作一个组件（模态），可以将一组组件（form-x、form-y等）中的任何一个作为其内容（通过某个按钮动态打开）
• 有一个共享提交按钮，可能还有一些其他所有表单都使用的共享表单方法，但也可以为特定表单调用自定义提交方法
• 在父模式上调用某种“close”方法

我已经尝试了很多东西，但我不认为我真的理解angular 2在这种情况下的架构最佳实践。也许我的方法全错了，所以请帮忙：）

只是一个想法：

您可以有一个组件并将表单放在其中

<modalForm (submit)="f.submit" [url]="someUrl">
    <myForm #f><myForm>
</modalForm>

@组件({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序{
名称：字符串；
构造函数（）{
this.name='Angular2'
}
}
@组成部分({
选择器：“我的父母”，
模板：`
点击
`,
})
导出类父类{
名称：字符串；
@Output（）submit=neweventemitter（）；
构造函数（）{
this.name='Angular2'
}
}
@组成部分({
选择器：“我的潜艇”，
模板：`
{{name}}
`,
})
出口级分包{
名称：字符串；
构造函数（）{
this.name='subsubsub'
}
提交（）{
console.log（'receives'）；
此.name='submitted'；
}
}

不过，我对其他答案很感兴趣，我相信还有更好的方法。

只是一个想法：

您可以有一个组件并将表单放在其中

<modalForm (submit)="f.submit" [url]="someUrl">
    <myForm #f><myForm>
</modalForm>

@组件({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序{
名称：字符串；
构造函数（）{
this.name='Angular2'
}
}
@组成部分({
选择器：“我的父母”，
模板：`
点击
`,
})
导出类父类{
名称：字符串；
@Output（）submit=neweventemitter（）；
构造函数（）{
this.name='Angular2'
}
}
@组成部分({
选择器：“我的潜艇”，
模板：`
{{name}}
`,
})
出口级分包{
名称：字符串；
构造函数（）{
this.name='subsubsub'
}
提交（）{
console.log（'receives'）；
此.name='submitted'；
}
}

---

不过，我对其他答案有点感兴趣，我相信还有更好的方法。

听起来我们有类似的要求，我们有一个页面有几个不同的对话框，所以我将分享我们正在做的事情，希望它会有用

我们正在使用来自的对话框并提供内容（如@Ced的上一个答案）

FormX组件将包含对话框内容

<form #formX="ngModel" (ngSubmit)="save($event)">
    // form fields here as required

    <app-button-bar>
        // see below for details..
    </app-button-bar>

</form>

@Component({
selector: 'app-form-x',
..
})
export class FormXComponent {

    @Output() cancelled: EventEmitter<any> = new EventEmitter();
    @Output() saved: EventEmitter<any> = new EventEmitter();

    ...
    cancel($event) {
       this.cancelled.emit($event);
    }

    save($event){
        //.. call the http service to save ..           
        this.saved.emit($event);
    }
}

//根据需要在此处填写表单字段
//详情见下文。。
@组成部分({
选择器：“app-form-x”，
..
})
导出类FormXComponent{
@输出（）已取消：EventEmitter=新的EventEmitter（）；
@输出（）已保存：EventEmitter=新的EventEmitter（）；
...
取消（$event）{
this.cancelled.emit（$event）；
}
保存（$event）{
//..调用http服务以保存。。
this.saved.emit（$event）；
}
}

我们还有一个组件来帮助我们在每个对话框的底部设置按钮

我们的大多数对话框都需要右侧的保存/取消按钮。
在左边有额外的按钮，在这种情况下，我们有一个打印选项

<app-button-bar>
    <app-left-buttons>
        <button type="button" class="btn btn-default" (click)="print()">
            <i class="fa fa-print"></i> Print
        </button>
    </app-left-buttons>

    <app-right-buttons>
        <button type="submit" class="btn btn-primary" [disabled]="!formX.valid">
            <i class="fa fa-check"></i> Save
        </button>
        <button type="button" class="btn btn-default" (click)="cancel$event)">
            <i class="fa fa-times"></i> Cancel
        </button>
    </app-right-buttons>
</app-button-bar>

印刷品
拯救
取消

听起来我们有类似的要求，我们有一个页面，有几个不同的对话框，所以我将分享我们正在做的事情，希望它会有用

我们正在使用来自的对话框并提供内容（如@Ced的上一个答案）

FormX组件将包含对话框内容

<form #formX="ngModel" (ngSubmit)="save($event)">
    // form fields here as required

    <app-button-bar>
        // see below for details..
    </app-button-bar>

</form>

@Component({
selector: 'app-form-x',
..
})
export class FormXComponent {

    @Output() cancelled: EventEmitter<any> = new EventEmitter();
    @Output() saved: EventEmitter<any> = new EventEmitter();

    ...
    cancel($event) {
       this.cancelled.emit($event);
    }

    save($event){
        //.. call the http service to save ..           
        this.saved.emit($event);
    }
}

//根据需要在此处填写表单字段
//详情见下文。。
@组成部分({
选择器：“app-form-x”，
..
})
导出类FormXComponent{
@输出（）已取消：EventEmitter=新的EventEmitter（）；
@输出（）已保存：EventEmitter=新的EventEmitter（）；
...
取消（$event）{
this.cancelled.emit（$event）；
}
保存（$event）{
//..调用http服务以保存。。
this.saved.emit（$event）；
}
}

我们还有一个组件来帮助我们在每个对话框的底部设置按钮

我们的大多数对话框都需要右侧的保存/取消按钮。
在左边有额外的按钮，在这种情况下，我们有一个打印选项

<app-button-bar>
    <app-left-buttons>
        <button type="button" class="btn btn-default" (click)="print()">
            <i class="fa fa-print"></i> Print
        </button>
    </app-left-buttons>

    <app-right-buttons>
        <button type="submit" class="btn btn-primary" [disabled]="!formX.valid">
            <i class="fa fa-check"></i> Save
        </button>
        <button type="button" class="btn btn-default" (click)="cancel$event)">
            <i class="fa fa-times"></i> Cancel
        </button>
    </app-right-buttons>
</app-button-bar>

印刷品
拯救
取消