Angulaire à 2 ng-Modal bootstrap: Comment passer des données à l'entrée de la composante
Je suis en train d'envoyer des données à une coutume modal composant de contenu afin que je puisse l'appeler à partir de n'importe quel autre composant et de ne pas répéter le code. Je suis nouveau sur Angulaire 2 et qui ont suivi les "Composants de contenu" démonstration de ng-bootstrap ainsi que la Composante "Interaction" dans l'angle de docs et n'ont pas trouvé un moyen d'obtenir ce travail ou un exemple de ce cas.
Je peux obtenir le modal à ouvrir, mais pas avec du contenu dynamique. J'ai essayé de la @Input
et l'approche de la variable, sans succès. J'ai aussi ajouté ModalService
pour les fournisseurs de app.module.ts
. C'est ce que j'ai avec les deux approches qui ne fonctionne pas:
page.component.html:
<a (click)="modal('message')">
<template ngbModalContainer><my-modal [data]="data"></my-modal></template>
page.composante.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.composante.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();
}
}
À l'aide angulaire v2.1.0, angulaires-cli v1.0.0-beta.16, ng-bootstrap v1.0.0-alpha.8
OriginalL'auteur asabido | 2016-10-14
Vous devez vous connecter pour publier un commentaire.
Il suffit de fournir un service et de l'injecter à
VideoModalComponent
etPageComponent
alors vous pouvez utiliser ce service pour communiquer.Voir https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectionnel-service pour plus de détails et d'exemples.
Soit fournir le service dans le composant racine ou faire un singleton service. Il devrait fonctionner.
Où voulez-vous fournir
ModalService
? Le nombre d'instances que vous obtenez dépend de l'endroit où vous les fournir. Si vous l'ajoutez àproviders
d'un composant, chaque composant va obtenir son propre exemple. Si vous l'ajoutez àproviders
de@NgModule()
(non-lazy chargé) alors qu'une instance est créée pour l'ensemble de l'application.J'ai essayé y compris
ModalService
en tant que fournisseur dans@ngModule()
et a ensuite essayé dePageComponent
et ne travaillent pas.Le problème semble être que les observables émet de la valeur avant de l'abonnement est mis en place. Si vous utilisez un
BehaviorSubject
au lieu de cela, puis l'abonné obtient la dernière valeur émise immédiatement après l'abonnement. plnkr.co/modifier/y28ppeYk7ZQ4nsOFmIi1?p=previewOriginalL'auteur Günter Zöchbauer
J'ai trouvé! Voici comment le faire:
Dans le composant(à partir d'où vous êtes à l'ouverture de la modale) faire:
Modale des composant(récepteur):
OriginalL'auteur BlackBeard
Voici quelques façons de le faire.
component
NgbActiveModal
Voir: https://github.com/ng-bootstrap/ng-bootstrap/issues/861#issuecomment-253500089
OriginalL'auteur Joel Raju