web-dev-qa-db-ja.com

Angular 6：彼女が私のサービスで変更したときに私のコンポーネントの値を更新します

私の目標は原則として単純ですが、適切に配置することはできません。サービスの変数が変更されたときにコンポーネントの1つを更新したいのです。

私の問題をよりよく説明するために、これは例です：

ここでは、ポイントを増減するサービスを行っています。関数の1つへの呼び出しを受信すると、このポイント数を増減します。また、この変数が偶数か奇数かを示します

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TestService {
  Number: number = 0;
  IsOdd: boolean = false;

  constructor() {}

  IncreaseNumber() {
    this.Number = this.Number + 1;
    this.IsOdd = !this.IsOdd;
  }

  DecreaseNumber() {
    this.Number = this.Number - 1;
    this.IsOdd = !this.IsOdd;
  }
}

*ここに、私のコンポーネントがあります。これは、私の数値が偶数か奇数かを知る必要があります。

初期化で問題ありません！それは知っています！

サービス（test.service.ts）で数値が変更されるたびに、値ペア/インポートがコンポーネント（test.component.ts）で変更されることを確認しますか？*

import { Component, OnInit } from '@angular/core';
import { TestService } from '../test.service'

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit {

  IsOdd: boolean = false;

  constructor(MyService: TestService) {}

  ngOnInit() {
    this.IsOdd = MyService.IsOdd;
  }

}

どうすればよいですか？

コンポーネントは何らかの方法でサービスにsubscribeする必要がありますか？または、更新のためにngOnInitのような1つの関数を使用する必要がありましたか？

前もって感謝します

angulartypescriptservicecomponents
5
Scieur Arnaud

Observableを設定して変更をサブスクライブするなど、使用できるソリューションは複数あります。これらはすべて有効なソリューションです。

最も簡単な解決策は、値ではなくテンプレートのサービスにバインドすることです。

<div> {{ MyService.IsOdd }} </div>

ngOnInitでは、コンポーネントのプロパティにブール値valueを割り当てています。この値は変更されません。データバインディングを作成して変更に応答するには、.を必要とするオブジェクトを使用してプロパティへの参照をバインドする必要があります。したがって、MyService.IsOddはテンプレートで機能します。

https://stackblitz.com/edit/angular-rktij7

1
Explosion Pills

あなたが言っていることが機能するためには、他のコンポーネントではなく、TestComponent内のサービスでnumberを増減する必要があります。

import { Component, OnInit } from '@angular/core';
import { TestService } from '../test.service'

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit {

  IsOdd: boolean = false;

  constructor(MyService: TestService) {}

  ngOnInit() {
    this.IsOdd = MyService.IsOdd;
  }

  increase() {
    MyService.IncreaseNumber();
  }

  decrease() {
    MyService.DecreaseNumber();
  }

  getIsOdd() {
    return MyService.IsOdd;
  }

}
1
gatsbyz

Observableはそれを行うための素晴らしい方法です。

もう1つの簡単な方法で、私の意見ではもっと単純ですが、IncreaseNumberでDecreaseNumberまたはTestServiceメソッドが呼び出されるたびにイベントを発行することです。

次に、TestComponentのコンストラクターで、TestServiceで作成したイベントをサブスクライブし、IsOddフィールド（またはコンポーネントで更新する他のフィールド）を更新できます。イベントはオブザーバブルのラッパーであるため、このサブスクリプションが可能です。

このように：まず、サービスでイベントエミッターを作成します

    import { Injectable } from '@angular/core';

    @Injectable({
      providedIn: 'root'
    })
    export class TestService {
      Number: number = 0;
      IsOdd: boolean = false;
      EmitIsOdd = new EventEmitter<any>();

      constructor() {}

      IncreaseNumber() {
        this.Number = this.Number + 1;
        this.IsOdd = !this.IsOdd;
        this.EmitIsOdd.emit();
      }

      DecreaseNumber() {
        this.Number = this.Number - 1;
        this.IsOdd = !this.IsOdd;
        this.EmitIsOdd.emit();
      }
    }

次に、コンポーネントコンストラクターでイベントをサブスクライブします。

    import { Component, OnInit } from '@angular/core';
    import { TestService } from '../test.service'

    @Component({
      selector: 'app-test',
      templateUrl: './test.component.html',
      styleUrls: ['./test.component.scss']
    })

    export class TestComponent implements OnInit {

      IsOdd: boolean = false;

      constructor(MyService: TestService) {
        this.MyService.EmitIsOdd.subscribe(
          () => {
            this.IsOdd = this.MyService.IsOdd;
          }    
        );
      }

      ngOnInit() {
        this.IsOdd = MyService.IsOdd;
      }
    }

シンプルで効果的です。

0
Onome Sotu