角度2の同じモーダルで複数の動的コンポーネントをどうやって使うのですか？

Question

私はユーザーが入力フォームのセットから選択できるプラットフォームを作っています。各フォームのコンテンツとサブミット処理（API呼び出しなど）は異なりますが、それを囲むユーザーインターフェイスは同じです：モーダルウィンドウで開く必要があります。また、自動保存メッセージと送信ボタン。

もちろん、私はモーダルロジックを再利用したいと思います。すでに私が遭遇したことがいくつかあります。どうすればいいのですか...

• コンポーネント（フォーム-x、フォーム-y、...）をコンテンツとして持つことができるコンポーネント（モーダル）ボタンのどこかに）
• 共有送信ボタンと、すべてのフォームで使用される他の共有フォームメソッドがありますが、特定のフォームのカスタム送信メソッドも呼び出されます。
• 'close'メソッドの呼び出し親のモーダル

私はたくさんのことを試みましたが、私は実際にアーキテクチャを理解しているとは思わないこのような場合の角度2のベストプラクティスです。

あなたはコンポーネントを持っているとmodalFormあなたにそれからそれ

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

内のフォームを置くことができます：たぶん私はすべての間違ったアプローチを取得していますので、:)

Answer 1

ジャストアイデアを助けてください「はdは

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

</div> 

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

@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'; 
    } 
} 

他の回答にも興味がありますが、より良い方法があると確信しています。

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>