web-dev-qa-db-ja.com

Angular 2コンポーネントからサービスにデータを送信

私の目標は、データをAngularコンポーネントからサービスに送信し、サービスメソッドを使用して作業することです。例：

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

およびサービス：

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

データの取得は未定義です。動作させる方法は？

javascriptangulartypescriptangular-servicesangular-components
9
IntoTheDeep

サービスとコンポーネント間の相互作用の例：

サービス：

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

Component1（送信者）：

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

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

Component2（レシーバー）：

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

説明：

MyServiceはdataを管理しています。必要に応じてdataで何かをすることもできますが、_Component2_のままにしておく方が良いでしょう。

基本的に、MyServiceは_Component1_からdataを受け取り、メソッドmyMethod()にサブスクライブしている人に送信します。

_Component1_はdataにMyServiceを送信していますが、それだけです。 _Component2_はmyMethod()にサブスクライブされているため、myMethod()が呼び出されるたびに、_Component2_はリッスンし、myMethod()が返すものをすべて取得します。

12
SrAxi

@SrAxiの応答には、サービスデータをサブスクライブできないため、受信側コンポーネントに小さな問題があります。 Subjectの代わりにBehaviorSubjectの使用を検討してください。それは私のために働いた！

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