通过服务角度2在组件之间传递用户定义的数字

Posted 2023-02-22

【中文标题】通过服务角度2在组件之间传递用户定义的数字

【英文标题】：Passing a user defined number between component through service angular 2

【发布时间】：2017-12-11 15:07:34

【问题描述】：

example.service.ts

import  Injectable  from '@angular/core';

@Injectable()
export class ExampleService 

    number1 : number;
    number2 : number;
    result : number;
    constructor()  

component1.component.ts

import  Component, OnInit  from '@angular/core';
import  ExampleService  from '../example.service'

@Component(
    selector: 'app-component1',
    templateUrl: './component1.component.html',
    styleUrls: ['./component1.component.css'],
    providers: [ExampleService]
)
export class Component1Component implements OnInit 

    number1v = null;
    number2v = null;
    resultv = null;

    constructor(public aService : ExampleService )  
        this.aService.number1 = this.number1v;
        this.aService.number2 = this.number2v;
        this.aService.result = this.resultv;
    
    ngOnInit() 
    
    processForm()
    this.resultv = this.number1v + this.number2v;
    

component2.component.ts

import  Component, OnInit  from '@angular/core';
import  ExampleService  from '../example.service'

@Component(
    selector: 'app-component2',
    templateUrl: './component2.component.html',
    styleUrls: ['./component2.component.css'],
    providers: [ExampleService]
)
export class Component2Component implements OnInit 
    resultv;
    constructor(public aService : ExampleService)  
        this.aService.result = this.resultv;
    

    ngOnInit() 
    
    getResult()
        alert(this.resultv)
    

想要将结果值从组件 1 传递给组件 2。

没有父到子或子到父组件。

我得到的结果是未定义的。

【问题讨论】：

使用这个blog post

Angular - shared service between components doesn't work的可能重复

【参考方案1】：

问题在于，当组件 A 更新服务时，组件 B 不知道这些更改。所以，为了解决这个问题，我们需要使用观察者模式，让所有观察者都知道变化。

幸运的是 Angular 自带了 rxjs，所以我们可以使用BehaviorSubject 来实现观察者模式。

服务代码

import  Injectable  from '@angular/core';

@Injectable()
export class ExampleService 

    number1 = new BehaviorSubject<number>(0);
    number2 = new BehaviorSubject<number>(0);
    result = new BehaviorSubject<number>(0);
    constructor()  

在组件内部你可以读取它们的值

service.number1.subscribe(num => 
   // ....
);

要更改任何数字，您可以通过这种方式更新它

service.number1.next(1); // set new number 

当然这是粗略的方式，您可以通过阅读在线教程或 BehaaviorSubject 上的答案获得更好的示例