Question

我正在使用服务在2个组件之间共享值。我在一个中显示此值，并想通过单击按钮在另一个中更改它。问题是该值未修改。我知道我在理解某些概念时遇到一些问题。谁能帮我。谢谢

dataservice.service.ts

export class DataserviceService {

  sharedValue=3;
  modifiedValue = 0;

  constructor() {
  }

  ngOnInit() {
   }

   changeData(){
    this.modifiedValue++;
   }

   retrieveData(){
    return this.modifiedValue;
  }


}

compo2.component.ts

export class Compo2Component implements OnInit {


  constructor(private datas:DataserviceService) {

   }

  ngOnInit() {

  }

  shareData(){

    this.datas.changeData();  

  }

}

compo2.component.html

<button (click)="shareData()">Click here</button>

get.component.ts

export class GetComponent implements OnInit {

  data:number;
  constructor(private datas:DataserviceService ){


  }

  ngOnInit() {

    this.data = this.datas.retrieveData();
    console.log(this.data);

  }

}

执行功能将值修改为构造函数时，会修改该值，但是当我尝试将它与click事件一起使用时，它将不起作用。

Answer 1

您应该使用可观察的东西，像这样：

export class DataserviceService {
  sharedValue=3;
  modifiedValue = 0;

  private modifiedValue : BehaviorSubject<number>;
  constructor() {
    this.modifiedValueSubject = new BehaviorSubject(this.modifiedValue);
  }
  changeData(){
    this.modifiedValue++;
    this.modifiedValueSubject.next(this.modifiedValue);
  }
  retrieveData(): Observable<number>{
     return this.modifiedValueSubject.asObservable();
  }
}

然后在组件ngOnInit中订阅该可观察项：

ngOnInit() {
    this.datas.retrieveData().subscribe(data =>{
    this.data = data;
    console.log(data);
 });
  }

单击事件后未修改服务值

1 个答案: