Salut, j'ai deux composants, un composant de liste et un composant et un service d'édition. une partie de mon Svc:

.....

    // Observable string sources
    private _updatedArray = new Subject<string>();

      // Service message commands
    setColDefs(columns: any) {
       this._updatedArray.next(columns);
       console.log(columns);
    }

getColDef(): Observable<any> {
    return this._updatedArray.asObservable();
}

Importer {Svc} depuis '../services/mySvc.svc' @NgModule ({ ......... fournisseurs: [Svc] }...

import { Svc } from '../services/mySvc.svc'

.....

this._listCompSvc.setColDefs(columns);

Jusque-là, son fonctionnement parfait. J'ai défini les valeurs de colonne et le console.log dans mon svc montrant les colonnes que je veux. mais le problème vient du composant d'édition, lorsque j'obtiens les valeurs (abonnement). mon code de composant d'édition:

import { Svc } from '../services/mySvc.svc';
..

export class EditComponent implements OnInit{
    private _colDefs: any;
    constructor(
        private _editCompSvc: Svc
        ){}

    ngOnInit() {
        this._editCompSvc.getColDef().subscribe(
          columns => {
              console.log(columns);
        });
    }

....

Et j'appelle mon service dans ma liste comme ci-dessous,...

Module:

import { NgModule } from '@angular/core';
import { routing } from './routes/myroute.route';
import { Svc } from './services/mySvc.svc'

import { ListComponent } from './actions/list.comp';
import { EditComponent } from './actions/edit.comp';

@NgModule({
    imports:
    [
        routing
    ],

    declarations:
    [
        ListComponent,
        EditComponent
    ],

    providers:
    [Svc]
})

export class Module { }
2
blackdaemon 1 avril 2017 à 10:11

2 réponses

Meilleure réponse
  1. C'est une façon de le faire: chargez le service dans le composant parent et partagez-le avec tous les enfants

Composant parent

import { Svc } from '../services/mySvc.svc'
@Component({
.......
    providers: [Svc]
    template:`<child1></child1>
                <child2></child2>`
})
export class TerminalComponent implements OnInit {

Dans les deux composants enfants

import { Svc } from '../services/mySvc.svc'
@Component({
selector: 'child1',
......
})
export class Child1Component implements OnInit {
constructor(private _editCompSvc: Svc){}
}

import { Svc } from '../services/mySvc.svc'
@Component({
selector: 'child1',
......
})
export class Child2Component implements OnInit {
constructor(private _editCompSvc: Svc){}
}
  1. Une autre façon est de charger le service dans le module de route / ou le module dans lequel tous ces composants sont chargés. Il n'est plus nécessaire d'ajouter cette ligne providers: [Svc] dans les composants.

    importer {Svc} depuis '../services/mySvc.svc' @NgModule ({ ......... fournisseurs: [Svc] }

1
Vivek Doshi 1 avril 2017 à 08:32

Vous avez ajouté Svc en tant que fournisseur de votre EditComponent. Ainsi, chaque composant d'édition obtient sa propre instance du service, qui est différente de celle utilisée par le composant de liste.

Pour être partagé, le service doit être fourni par un composant parent commun ou par un module parent commun.

3
eko 1 avril 2017 à 07:38