javascript - Angular 2 skicka data från komponent till tjänst

Mitt mål är att skicka data från en Angular-komponent till en tjänst och använda tjänstens metoder för att arbeta med den. Exempel:

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

och service:

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

Att få data är odefinierat. Hur får man det att fungera?

Svar #1

Ett exempel på interaktion mellan tjänst och komponent kan vara:

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

Komponent1 (avsändare):

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

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

Komponent2 (mottagare):

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

Förklaring:

MyService hanterar data. Du kan fortfarande göra saker med data om du vill, men det är bättre att lämna det till Component2.

I princip tar MyService emot data från Component1 och skickar det till den som är prenumererad på metoden myMethod().

Component1 skickar data till MyService och det är allt han gör. Component2 är prenumererad på myMethod(), så varje gång myMethod() kallas kommer Component2 lyssna och få vad än myMethod() returnerar.

Relaterade artiklar