web-dev-qa-db-ja.com

モーダルにパラメーターを渡す方法は？

それは私が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メソッドが必要とするのは名前だけですか？

それでは、どのようにパラメーターを渡すことができますか？

angulartypescriptmodal-dialogng-bootstrap
12
robert

パラメータ/データをモーダルに渡すには、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);
    });
}

これは、componentInstanceがMyComponent型であり、パブリックプロパティdataを持っていることを前提としています

14
PierreDuc

まだこれにつまずいている人は誰でもこれが便利だと思うかもしれません。あなたがする必要があるのは、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}}

お役に立てれば。

10
Sadiq Ali

Angular2のHTMLテンプレートにデータを渡す方法は次のとおりです。

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">
     {{MESSAGE_DATA}}
  </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 {
   MESSAGE_DATA : any;
   constructor(private modalService: NgbModal) {}

   open(content) {
      this.MESSAGE_DATA = "PASS DATA TO ANGULAR2 MODAL"
      this.modalService.open(content, { size: 'lg' }).result.then((result) => {
         console.log(result);
      }, (reason) => {
      console.log(reason);
    });
 }
}

mESSAGE_DATAがHTMLテンプレート内でどのように使用されているかを確認してください。

1
Devesh Jadon

モーダル構築の直後にデータを取得する必要がある場合は、モーダルでデータを処理するより良い方法があります。 angularインジェクターテクニックを使用。

  1. データのモデルを定義します。
class CustomModalOptions {
  stringProp: string; 
  numberProp: number;
}
  1. コンポーネントのどこかにモーダルを構築します。
this.modal.open(MyModal, {
  injector: Injector.create([{
    provide: CustomModalOptions, useValue: { stringProp: "foo bar", numberProp: 17 }
  }], this.injector)
});
  1. モーダルコンポーネントでのデータ取得の処理
@Component({ ... })
class MyModal {
  constructor(private options: CustomModalOptions) {
    console.log(this.options.stringProp);
    console.log(this.options.numberProp);
  }
}
1
Mikki

ここで、チャイルドモーダルの例を参照することをお勧めします モーダルのng2-bootstrapドキュメント 。親コンポーネントにパブリック変数を追加し、標準のバインド手法を使用してモーダルで使用します。

したがって、例では次のようにテンプレートにこれを追加します。

      <div class="modal-body">
          {{parentMessage}}
      </div>

次のようにコンポーネントを変更します。

export class DemoModalChildComponent {
  @ViewChild('childModal') public childModal:ModalDirective;
  parentMessage = 'I am a child modal, opened from parent component!'; //Add this

親コンポーネントからデータを渡しているので、標準パターンに従ってデータを親コンポーネントに渡すことができます。

1
GlennSills