Question

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

想要将component1的结果值传递给component2。

父母组件中没有子级或子级的父级。

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

Answer 1

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

幸运的是，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上阅读在线教程或答案的更好的例子

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

1 个答案: