0

@ng-bootstrap で Angular 2 を使用しています。次のようなモーダル ダイアログがあります。

<template #editDialog let-c="close" let-d="dismiss">
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
        <h4 class="modal-title">MyHeader</h4>
    </div>
    <div class="modal-body">
        <div class="form">
            <label class="form-label" for="myinput">Caption: </label>
            <input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" (click)="c('true')">OK</button>
        <button class="btn btn-default" (click)="c('false')">Cancel</button>
    </div>
</template>

モーダル ダイアログのフレームを再利用したいのですが、コンポーネントの本体を変更したいだけです。次のようになります。

<my-modal>
    <div class="form">
        <label class="form-label" for="myinput">Caption: </label>
        <input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
    </div>
</my-modal>

特にモデル(selected.Caption)でこれを達成する方法を教えてもらえますか? 私はたくさん試しましたが、うまくいきませんでした。

アップデート

明確にするために：いくつかのHTMLタグを挿入したいので、次のようなものを取得します：

<div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
    <!-- MY CUSTOM HTML COMES HERE! -->
    <!-- MAYBE WITH <ng-content></ng-content> -->
</div>
<div class="modal-footer">
    <button class="btn btn-default" (click)="activeModal.close(true)">OK</button>
    <button class="btn btn-default" ((click)="activeModal.close(false)">Abbrechen</button>
</div>

@pkozlowski.opensource の答えは、基本的にモーダルの開閉で機能します。しかし、私は自分の体をそこに入れません。

<my-modal>
    <div class="form">
        <label class="form-label" for="myinput">Caption: </label>
        <input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
    </div>
</my-modal>
4

3 に答える 3

1

それがどのように機能するかの解決策を見つけました。私のプランクをご覧ください: http://plnkr.co/edit/BNlsp2bGfWmae4K4ZTtT?p=preview

次のようにモーダル ビューにテンプレートを挿入する必要があります。

[...]
export class EditDialogContent implements OnInit {
    template: TemplateRef<any>;

    constructor(public activeModal: NgbActiveModal) {}
}

対応する HTML は次のとおりです。

<div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    <h4 class="modal-title">My Header</h4>
</div>
<div class="modal-body">
    <!-- THIS IS IMPORTANT! -->
    <template [ngTemplateOutlet]="template"></template>
</div>
<div class="modal-footer">
    <button class="btn btn-default" (click)="activeModal.close(true)">OK</button>
    <button class="btn btn-default" (click)="activeModal.close(false)">Cancel</button>
</div>

本文テンプレートの HTML は次のとおりです。

<p>You can pass an existing component as content of the modal window. In this case remember to add content component as an <code>entryComponents</code> section of your <code>NgModule</code>.</p>

<template #bodyTemplate>
  <div class="form">
    <label class="form-label" for="myinput">Caption: </label>
    <input class="form-control" type="text" id="myinput" [(ngModel)]="selected.Caption" />
  </div>
</template>

<button class="btn btn-lg btn-outline-primary" (click)="open(bodyTemplate)">Launch demo modal</button>

ダイアログを開くには、背後のコンポーネントでこれを行うだけです。

open(bodyTemplate) {
    const modalRef = this.modalService.open(EditDialogContent);
    modalRef.componentInstance.template = bodyTemplate;
    modalRef.result.then((closeResult) => {
      console.log(`Closed with: ${closeResult}`);
    });
  }

pkozlowski-opensourceのご協力に感謝します。

于 2016-11-03T09:39:20.403 に答える
0

モーダル用に別のコンポーネントを作成する必要があります。

そして、それを達成したい場合は、このようなモーダルの本体のみを変更します。

modal.component.ts

@Component({
  selector: 'modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class AppComponent {
      @Input() title: string;
}

modal.component.html

<modal let-c="close" let-d="dismiss">
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
        <h4 class="modal-title">{{ title }}</h4>
    </div>

    <div class="modal-body">
      <ng-content select="body-of-modal"></ng-content>
    </div>

    <div class="modal-footer">
    <ng-content select="footer-of-modal"></ng-content>
    </div>
</modal>

ここで重要な部分は<ng-content>

それはどのように機能しますか？

モーダルコンポーネントを再利用したい場合は、例に続く他のコンポーネントであり、次のようになります。

あなたの例:

<modal #editDialog title="My Header" let-c="close" let-d="dismiss">
    <body-of-modal>
        <div class="form">
            <label class="form-label" for="myinput">Caption: </label>
            <input class="form-control" type="text" id="myinput" [ngModel]="selected.Caption" />
        </div>
    </body-of-modal>
     <footer-of-modal>
        <button class="btn btn-default" (click)="c('true')">OK</button>
        <button class="btn btn-default" (click)="c('false')">Cancel</button>
    </footer-of-modal>
</modal>

この例は 100% 正しいわけではなく、おそらくいくつかのタイプミスを犯しましたが、簡単な例でどのように機能するかを説明したかっただけです。

ご理解いただければ幸いです。上記の例から何かが明確でない場合は、遠慮なく尋ねてください。

于 2016-11-02T14:32:30.700 に答える