web-dev-qa-db-de.com

Angular 2 Daten von Komponente zu Service senden

Mein Ziel ist es, Daten von der Komponente Angular an den Dienst zu senden und Dienstmethoden zu verwenden, um daran zu arbeiten. Beispiel:

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

und service:

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

Das Abrufen von Daten ist undefiniert. Wie funktioniert es?

javascriptangulartypescriptangular-servicesangular-components
6
TeodorKolev

Ein Beispiel, wenn die Interaktion zwischen Service und Komponente folgendermaßen aussehen könnte:

Bedienung: 

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

Komponente1 (Absender): 

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

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

Komponente2 (Empfänger): 

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

Erklärung:

MyService verwaltet die data. Sie können mit data immer noch Sachen machen, wenn Sie möchten, aber es ist besser, Component2 zu überlassen. 

Grundsätzlich erhält MyServicedata von Component1 und sendet sie an den Abonnenten der Methode myMethod().

Component1 sendet data an die MyService und das ist alles, was er tut .Component2 ist bei myMethod() abonniert. Wenn also myMethod() aufgerufen wird, hört Component2 auf alles, was myMethod() zurückgibt.

8
SrAxi

In der Antwort von @SrAxi gibt es ein kleines Problem mit der Empfängerkomponente, da die Dienstdaten nicht abonniert werden können. Erwägen Sie die Verwendung von BehaviorSubject anstelle von Subject. Es hat für mich funktioniert!

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