webentwicklung-frage-antwort-db.com.de

Angular 2 ng-bootstrap Modal: So übergeben Sie Daten an die Eintragskomponente

Ich versuche, Daten an eine benutzerdefinierte modale Inhaltskomponente zu senden, damit ich sie von jeder anderen Komponente aus aufrufen kann und keinen Code wiederholen kann. Ich bin neu bei Angular 2 und habe die "Komponenten als Inhalt" -Demo von ng-boostrap sowie die "Komponenten-Interaktion" in den Angular-Dokumenten mitverfolgt und keinen Weg gefunden, um dies für diesen Fall zu klären .

Ich kann die Modalität öffnen, aber nicht mit dynamischen Inhalten. Ich habe den @Input und den variablen Ansatz ohne Erfolg ausprobiert. Ich habe auch ModalService zu den Anbietern in app.module.ts hinzugefügt. Dies ist, was ich mit beiden Ansätzen habe, die nicht funktionieren:

page.component.html:

<a (click)="modal('message')">
<template ngbModalContainer><my-modal [data]="data"></my-modal></template>

page.component.ts:

import { Component } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { ModalService } from '../helpers/modal.service'
import { ModalComponent } from '../helpers/modal.component'

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.scss'],
  entryComponents: [ ModalComponent ]
})

export class PageComponent {
  data = 'customData'
  constructor (
    private ngbModalService: NgbModal,
    private modalService: ModalService
   ) { }

  closeResult: string
  modal(content) {
    this.data = 'changedData'
    this.modalService.newModal(content)
    this.ngbModalService.open(ModalComponent).result.then((result) => {
      this.closeResult = `Closed with: ${result}`
    }, (reason) => {
      this.closeResult = `Dismissed ${reason}`
    });
  }
}

modal.service.ts:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class ModalService {
  private modalSource = new Subject<string>()
  modal$ = this.modalSource.asObservable()
  newModal(content: string) {
    this.modalSource.next(content)
  }
}

modal.component.ts:

import { Component, Input, OnDestroy } from '@angular/core';
import { Subscription }   from 'rxjs/Subscription';
import { ModalService } from './modal.service'

@Component({
  selector: 'my-modal',
  template: `
    <div class="modal-body">
    {{data}}
    {{content}}
    </div>
  `
})

export class ModalComponent implements OnDestroy {
  @Input() data: string
  content = 'hello'

  subscription: Subscription
  constructor(
    private modalService: ModalService
  ) {
    this.subscription = modalService.modal$.subscribe(
      content => {
        this.content = content
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Verwendung von angle v2.1.0, angle-cli v1.0.0-beta.16, ng-bootstrap v1.0.0-alpha.8

10
asabido

Stellen Sie einfach einen Dienst bereit und fügen Sie ihn in VideoModalComponent und PageComponent ein. Dann können Sie diesen Dienst verwenden, um zu kommunizieren.

Weitere Einzelheiten und Beispiele finden Sie unter https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service .

2

Ich habe es gelöst! So geht's: 

  • Führen Sie in der Komponente (von der Sie das Modal öffnen) Folgendes aus: 

    const modalRef = this.modalService.open(ModalComponent);
    
    modalRef.componentInstance.passedData= this.dataToPass;
    
    modalRef.result.then(result => {
      //do something with result
    }                                                       
    
  • In der modalen Komponente (Empfangsende): 

    export class ModalComponent { 
    
     passedData: typeOfData;     // declare it!
    
     someFunction() {     // or some  lifecycle hook 
      console.log(this.passedData)  // and then, use it!
     }
    
    // rest of the ModalComponent 
    }
    
6
BlackBeard

Hier sind einige Möglichkeiten, dies zu tun.

  1. Eine Instanz einer component verfügbar machen
  2. Verwenden Sie aufgelöste Werte für die Auflösung von und machen Sie sie für eine Instanz von NgbActiveModal verfügbar.
  3. Verwenden Sie auflösen und binden Sie aufgelöste Werte mit den Eingaben der Komponente.

Siehe: https://github.com/ng-bootstrap/ng-bootstrap/issues/861#issuecomment-253500089

0
Joel Raju