16

それが私が ng2-bootstrap モーダルを使用する方法です:

import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'add-customer-modal',
  template: `
    <template #test let-c="close" let-d="dismiss">
      <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
      </div>
    </template>
    <button type="button" class="btn btn-primary btn-sm" (click)="open(test)"><i class="fa fa-plus"></i> <i class="fa fa-user-o"></i></button>
  `
})
export class AddCustomerModal {

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, { size: 'lg' }).result.then((result) => {
      console.log(result);
    }, (reason) => {
      console.log(reason);
    });
  }
}

コンテンツがパラメーターをモーダルに渡すために使用されると思ったので、少し混乱しています。しかし、私の意見では、 open メソッドが正しいテンプレートを見つけるために必要なのは名前だけですか?

では、どうすればパラメータを渡すことができますか?

4

5 に答える 5

16

これにつまずいた人は、これが便利だと思うかもしれません。必要なことは、ModalComponent 内で次のようにフィールドを宣言することだけです。

 modalHeader: string;
 advertiser: Advertiser;

これらのフィールドを設定するには、モーダルを開くときに次の操作を行います。

advertiserModalShow() {
    const activeModal = this.modalService.open(AdvertiserModal, { size: 'lg' });
    activeModal.componentInstance.modalHeader = 'Advertiser';
    activeModal.componentInstance.advertiser = this.selectedAdvertiser;
}

テンプレートでは、次のようにアクセスできます。

value={{advertiser.code}}

お役に立てれば。

于 2017-06-12T14:54:23.430 に答える
14

パラメータ/データをモーダルに渡すには、次を使用すると思いますcomponentInstance。

open(content) {
    const modal: NgbModalRef = this.modalService.open(content, { size: 'lg' });

    (<MyComponent>model.componentInstance).data = 'hi';

    modal.result.then((result) => {
      console.log(result);
    }, (reason) => {
      console.log(reason);
    });
}

MyComponentこれは、 componentInstance がタイプであり、それが public プロパティを持っていることを前提としていますdata

于 2016-12-14T10:36:22.687 に答える