web-dev-qa-db-fra.com

Angular 2 envoi de données du composant au service

Mon objectif est d’envoyer des données du composant Angular au service et d’utiliser des méthodes de service pour y travailler. Exemple:

export class SomeComponent {
    public data: Array<any> = MyData;
    public constructor(private myService: MyService) {
      this.myService.data = this.data;
    }
}

et service:

@Injectable()
export class TablePageService {
    public data: Array<any>;
    constructor() {
        console.log(this.data);
        // undefined
    }
}

Obtenir des données n'est pas défini. Comment le faire fonctionner?

javascriptangulartypescriptangular-servicesangular-components
6
TeodorKolev

Un exemple si une interaction entre service et composant pourrait être:

Un service: 

@Injectable()
export class MyService {
    myMethod$: Observable<any>;
    private myMethodSubject = new Subject<any>();

    constructor() {
        this.myMethod$ = this.myMethodSubject.asObservable();
    }

    myMethod(data) {
        console.log(data); // I have data! Let's return it so subscribers can use it!
        // we can do stuff with data if we want
        this.myMethodSubject.next(data);
    }
}

Composant1 (expéditeur): 

export class SomeComponent {
    public data: Array<any> = MyData;

    public constructor(private myService: MyService) {
        this.myService.myMethod(this.data);
    }
}

Composant2 (récepteur): 

export class SomeComponent2 {
    public data: Array<any> = MyData;

    public constructor(private myService: MyService) {
        this.myService.myMethod$.subscribe((data) => {
                this.data = data; // And he have data here too!
            }
        );
    }
}

Explication:

MyService gère la data. Vous pouvez toujours faire des choses avec data si vous voulez, mais il est préférable de laisser cela à Component2. 

En gros, MyService reçoit data de Component1 et l’envoie à quiconque est abonné à la méthode myMethod().

Component1 envoie data à la MyService et c'est tout ce qu'il fait .Component2 est abonné à la myMethod() afin que chaque fois que myMethod() soit appelé, Component2 écoute et récupère tout ce que myMethod() renvoie.

8
SrAxi

Il y a un petit problème avec le composant récepteur dans la réponse de @SrAxi car il ne peut pas s’abonner aux données du service. Pensez à utiliser BehaviorSubject au lieu de Subject. Cela a fonctionné pour moi!

private myMethodSubject = new BehaviorSubject<any>("");
0
Debo