Question

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

当然我想重新使用我的模态逻辑。我已经遇到过很多事情。我该怎么办...

制作一个组件（模态），它可以包含任何一组组件（form-x，form-y，...）作为其内容（通过某个按钮动态打开）
有一个共享的提交按钮，可能是所有表单使用的其他共享表单方法，但是也可以为特定表单调用自定义提交方法
在父模式上调用某种'close'方法

我已经尝试了很多东西，但我不认为我真的理解这种情况下角度2的建筑最佳实践。也许我的方法都错了，所以请帮忙:)。

Answer 1

只是一个想法：

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

modalForm

然后在<div> <button class="closeBtn" (click)="close()">X</submit> <ng-content ></ng-content> <button class="fakeSubmitBtn" (click)="emitter.next()">Submit</submit> </div>你有

@Component({
  selector: 'my-app',
  template: `
    <my-parent (submit)="c.submit()">
       <my-sub #c></my-sub>
    </my-parent>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}


@Component({
  selector: 'my-parent',
  template: `
    <div>
       <ng-content #f></ng-content>
       <button (click)="submit.emit(true)">CLICK</button>
    </div>
  `,
})
export class Parent {
  name:string;
  @Output() submit = new EventEmitter<boolean>();
  constructor() {
    this.name = 'Angular2'
  }

}


@Component({
  selector: 'my-sub',
  template: `
    <h1>{{name}}</h1>
  `,
})
export class Sub {
  name:string;
  constructor() {
    this.name = 'SUBSUB'
  }
  submit(){
    console.log('receives');
    this.name='submitted';
  }
}

https://plnkr.co/edit/bCUSVBwBskiI353wN1PO?p=preview

webpack-dev-server

我对其他答案很感兴趣，我确信有更好的方法。

Answer 2

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

我们正在使用PrimeNG中的对话框并提供内容（如@Ced之前的回答）。

<p-dialog [(visible)]="showFormX" header="Form X" modal="true">
    <app-form-x (cancelled)="showFormX = false">
    </app-form-x>
</p-dialog>

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-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>

如何在角度2的同一模态中使用多个动态组件？

2 个答案: