it-swarm.com.de

Wie werden Parameter an Modal übergeben?

So verwende ich den ng2-bootstrap-Modal:

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);
    });
  }
}

Ich bin etwas verwirrt, weil ich dachte, dass der Inhalt verwendet wird, um Parameter an das Modal zu übergeben. Aber meiner Meinung nach ist es nur der Name, den die offene Methode benötigt, um die richtige Vorlage zu finden.

Wie kann ich Parameter übergeben?

10
robert

Um Parameter/Daten an das Modal zu übergeben, würde ich die componentInstance verwenden:

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);
    });
}

Dabei wird davon ausgegangen, dass die componentInstance vom Typ MyComponent ist und eine öffentliche Eigenschaft data besitzt.

13
PierreDuc

Jeder, der noch auf dieses Thema stößt, könnte dies als praktisch finden. Alles, was Sie tun müssen, ist, ein Feld in Ihrer ModalComponent wie folgt zu deklarieren:

 modalHeader: string;
 advertiser: Advertiser;

Sie können diese Felder festlegen, indem Sie beim Öffnen eines Modals folgendermaßen vorgehen.

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

In Ihrer Vorlage können Sie wie folgt darauf zugreifen:

value={{advertiser.code}}

Hoffe das hilft.

9
Sadiq Ali

So können Sie Daten in Angular2 an Ihre HTML-Vorlage übergeben

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);
    });
 }
}

prüfen Sie, wie MESSAGE_DATA in der HTML-Vorlage verwendet wird. 

2
Devesh Jadon

Es gibt einen besseren Ansatz, Daten im Modal zu behandeln, wenn Sie Daten unmittelbar nach dem Modalaufbau benötigen. Verwendung von winkligen - Injektoren - Technik.

  1. Definieren Sie ein Modell für Ihre Daten.
class CustomModalOptions {
  stringProp: string; 
  numberProp: number;
}
  1. Bauen Sie Ihr Modal irgendwo in Ihrer Komponente auf:
this.modal.open(MyModal, {
  injector: Injector.create([{
    provide: CustomModalOptions, useValue: { stringProp: "foo bar", numberProp: 17 }
  }], this.injector)
});
  1. Behandeln Sie das Abrufen von Daten in Ihrer Modal-Komponente
@Component({ ... })
class MyModal {
  constructor(private options: CustomModalOptions) {
    console.log(this.options.stringProp);
    console.log(this.options.numberProp);
  }
}
1
Mikki

Ich würde vorschlagen, dass Sie sich das Child Modal-Beispiel hier ng2-bootstrap-Dokumentation für Modals ansehen. Fügen Sie einfach öffentliche Variablen zur übergeordneten Komponente hinzu und verwenden Sie sie in Ihrem Modal unter Verwendung von Standardbindungstechniken. 

In diesem Beispiel fügen Sie dies der Vorlage wie folgt hinzu:

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

und ändern Sie die Komponente wie folgt:

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

Wenn Sie nun Daten von der übergeordneten Komponente übergeben, können Sie Daten an die übergeordnete Komponente übergeben, indem Sie den Standardmustern folgen.

1
GlennSills