Gewusst wie: übergeben Sie Parameter an modal?

Das ist die Art, wie ich die 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 ein bisschen verwirrt, weil ich dachte, der content benutzt wird, um Parameter auf die modalen. Aber es ist meiner Meinung nach nur den Namen der offenen Methode finden muss, um die richtige Vorlage?

Also, wie kann ich Parameter übergeben?

Lesen Sie hier weitere Informationen: http://stackoverflow.com/questions/39464345/best-practice-for-calling-the-ngbmodal-open-method
Danke! Und wie kann ich Parameter übergeben,/data, um den modal?
Für alle diese Menschen, die versuchen, einen Weg zu finden, um diese Arbeit zu machen "der einfache Weg," es ist keine Zauberei. Wenn Sie mit dem (faulen) "pass by TemplateRef" - Methode KÖNNEN Sie NICHT die Verwendung componentInstance da ist es undefiniert, wenn ein TemplateRef übergeben wird in der NgbModal.

InformationsquelleAutor robert | 2016-12-14

13

Parameter/Daten zum modal, meine Vermutung wäre, die Nutzung 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);
    });
}
```
Dies setzt Voraus, dass das componentInstance-Typ ist MyComponent ist und dass es eine öffentliche Eigenschaft data

Ich bekomme diese Fehlermeldung. Eigenschaft 'componentInstance' existiert nicht auf Typ 'BsModalRef'.
Das ist, weil Sie mit ngx-bootstrap und nicht ng-bootstrap. Ich glaube, Sie haben zu verwenden content statt componentInstance

InformationsquelleAutor PierreDuc
9

Jemand noch stolpern auf dieser finden das praktisch, alles, was Sie tun müssen, ist, deklarieren Sie ein Feld in Ihrem ModalComponent wie diese:
```
 modalHeader: string;
 advertiser: Advertiser;
```
Können Sie diese Felder, indem Sie die folgenden, wenn Sie das öffnen eines modalen.
```
advertiserModalShow() {
    const activeModal = this.modalService.open(AdvertiserModal, { size: 'lg' });
    activeModal.componentInstance.modalHeader = 'Advertiser';
    activeModal.componentInstance.advertiser = this.selectedAdvertiser;
}
```
In Ihrer Vorlage, die Sie auf Sie zugreifen können wie diese:
```
value={{advertiser.code}}
```
Hoffe, das hilft.

Ich bekomme diese Fehlermeldung. Eigenschaft 'componentInstance' existiert nicht auf Typ 'BsModalRef'
Überprüfen Sie die version, die Sie wahrscheinlich benötigen, um update der Abhängigkeit.
dies kann zu ExpressionChangedAfterItHasBeenCheckedError Fehler

InformationsquelleAutor Sadiq Ali

Hier ist, wie können Sie übertragen die Daten auf Ihrer HTML-Vorlage im Angular2

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

überprüfen, wie MESSAGE_DATA ist im HTML-Template.

Sie definieren MESSAGE_DATA in der übergeordneten Komponente und verwenden Sie es dort, das ist einfach. Wie zu definieren MESSAGE_DATA in open() und übergeben es an HTML?

InformationsquelleAutor Devesh Jadon

1

Ich würde vorschlagen, Sie schauen auf das Kind Modal Beispiel hier ng2-bootstrap-Dokumentation für modals. Fügen Sie einfach die öffentlichen Variablen der übergeordneten Komponente und verwenden Sie Sie in Ihrer modalen Verwendung von standard-binding-Techniken.

So, in dem Beispiel, fügen Sie diese zu der Vorlage wie folgt:
```
      <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
```
Nun, dass Sie auf der Durchreise sind, die Daten aus der parent-Komponente übergeben Sie Daten an die übergeordnete Komponente durch die folgenden standard-mustern.

InformationsquelleAutor GlennSills

Es ist ein besserer Ansatz, um Daten zu behandeln, die in der modal-wenn Sie brauchen, um Daten sofort nach der modalen Konstruktion. Mit eckigen Injektor Technik.

Definieren ein Modell für Ihre Daten.

class CustomModalOptions {
  stringProp: string; 
  numberProp: number;
}

Bauen Sie Ihre modalen irgendwo in der Komponente:

this.modal.open(MyModal, {
  injector: Injector.create([{
    provide: CustomModalOptions, useValue: { stringProp: "foo bar", numberProp: 17 }
  }], this.injector)
});

Verarbeiten Daten abrufen, die in Ihren Modalen Komponente

@Component({ ... })
class MyModal {
  constructor(private options: CustomModalOptions) {
    console.log(this.options.stringProp);
    console.log(this.options.numberProp);
  }
}

InformationsquelleAutor Mikki

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.