web-dev-qa-db-fra.com

Angular 2 ng-bootstrap Modal: Comment passer des données à un composant d’entrée

J'essaie d'envoyer des données à un composant de contenu modal personnalisé afin de pouvoir l'appeler à partir de tout autre composant et ne pas répéter le code. Je suis nouveau dans Angular 2 et ai suivi la démonstration "Components as content" de ng-boostrap ainsi que "Component Interaction" dans la documentation Angular et je n'ai trouvé aucun moyen de le faire fonctionner ni d'exemple pour ce cas. .

Je peux obtenir le modal pour l'ouvrir, mais pas avec le contenu dynamique. J'ai essayé l'approche @Input et la variable sans succès. J'ai également ajouté ModalService aux fournisseurs dans app.module.ts. Voici ce que j'ai avec les deux approches qui ne fonctionnent pas:

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

Utiliser angular v2.1.0, angular-cli v1.0.0-beta.16, ng-bootstrap v1.0.0-alpha.8

javascriptangulartypescriptng-bootstrap
10
asabido

Il suffit de fournir un service et de l’injecter dans VideoModalComponent et PageComponent pour que vous puissiez utiliser ce service pour communiquer.

Voir https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service pour plus de détails et d'exemples.

2
Günter Zöchbauer

Je l'ai résolu! Voici comment le faire: 

  • Dans le composant (à partir duquel vous ouvrez le modal), procédez comme suit: 

    const modalRef = this.modalService.open(ModalComponent);

modalRef.componentInstance.passedData= this.dataToPass;

modalRef.result.then(result => {
  //do something with result
}

  • Dans la composante modale (extrémité réceptrice): 

    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

Voici quelques façons de le faire.

  1. Exposer une instance de component
  2. Utilisez resolvez et exposez les valeurs résolues sur une instance de NgbActiveModal
  3. Utilisez resolvez et liez les valeurs résolues aux entrées du composant.

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

0
Joel Raju