如何在不相关的有角度的2个分量之间共享数字属性（仅通过服务）？

Question

我需要共享一个属性，该属性是两个与孩子/父母无关的组件之间的数字。我需要一个真实的例子。目前，该属性仅在一个组件中，因此我还需要知道如何在此之间发送数据。我不会使用诸如click之类的东西，我想知道当函数更改值时是否可以发送更改；

例如：

A部分有一个数字（monthValue）-组件A具有功能

setMonthValue(){
    this.monthValue = x;
}

[这两个成分（A e B）如何共享此值？我需要在B中接收/读取该值；

Answer 1

实际上，最好的方法是服务。在提供示例代码之前，我希望您在一点上保持谨慎。

组件不应具有“业务代码”]]。

根据此信息，可以更轻松地构建其应用程序。因此，此著名的“业务代码”将包含在服务中。知道可观察的事物可以帮助您！

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

@Injectable({
  providedIn: 'root'
})
export class BusinessService
{
  public mySharedData$: BehaviorSubject<Date> = new BehaviorSubject<Date>(new Date());
}
此服务可以包含逻辑，业务信息，并可以同步不是父/子的几个组件。重要的是要注意，此服务是单例的。您不应将其添加到模块的providers表中。如果执行此操作，请知道每个组件都将具有此服务的自己的实例，并且结果将不存在！

---

组件A：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { BusinessService } from './../business.service';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html',
  styleUrls: ['./component-a.component.css']
})
export class ComponentAComponent implements OnInit, OnDestroy
{
  public data: Date;

  private _destroy$: Subject<boolean> = new Subject<boolean>();

  public constructor(
    private _businessService: BusinessService
  ) { }

  public ngOnInit(): void
  {
    this._businessService
      .mySharedData$
      .pipe(takeUntil(this._destroy$))
      .subscribe(value => this.data = value);
  }

  public ngOnDestroy(): void
  {
    this._destroy$.next(true);
    this._destroy$.complete();
  }
}
B部分：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { BusinessService } from './../business.service';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html',
  styleUrls: ['./component-b.component.css']
})
export class ComponentBComponent implements OnInit, OnDestroy
{
  public data: Date;

  private _destroy$: Subject<boolean> = new Subject<boolean>();

  public constructor(
    private _businessService: BusinessService
  ) { }

  public ngOnInit(): void
  {
    this._businessService
      .mySharedData$
      .pipe(takeUntil(this._destroy$))
      .subscribe(value => this.data = value);
  }

  public ngOnDestroy(): void
  {
    this._destroy$.next(true);
    this._destroy$.complete();
  }
}
这是组件A和B的代码。我们将BusinessService注入各个组件，并通过ngOnInit方法订阅BusinessService中存在的mySharedData属性的值更改。机制如下：

• 服务在注入时在内存中
• 该服务将mySharedData属性与今天的日期一起使用，并将更改通知用户（不同的组件）。
• 不同的组件接收更新并根据需要处理数据。

此时，您可以在多个组件之间同步值。您仍然必须了解更新机制。确实，例如，您想要从组件更新此值。

让我们稍微修改组件B的代码：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { BusinessService } from './../business.service';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html',
  styleUrls: ['./component-b.component.css']
})
export class ComponentBComponent implements OnInit, OnDestroy
{
  public data: Date;

  private _destroy$: Subject<boolean> = new Subject<boolean>();

  public constructor(
    private _businessService: BusinessService
  ) { }

  public ngOnInit(): void
  {
    this._businessService
      .mySharedData$
      .pipe(takeUntil(this._destroy$))
      .subscribe(value => this.data = value);
  }

  public ngOnDestroy(): void
  {
    this._destroy$.next(true);
    this._destroy$.complete();
  }

  public updateData(): void
  {
    this._businessService
      .mySharedData$
      .next(new Date());
  }
}
就这些！新值将被推送到服务中，并且更改将通知不同的组件。

我给你一个概念，这取决于你自己。请注意，可以使用异步管道在组件模板中直接管理对mySharedData的订阅。

如果您有任何疑问和/或意见，我当然可以提供。

注意：要使用干净的代码，我建议您清除订阅以破坏组件。我根据这些思路为您提供了一个示例，以给您一些想法。 （_destroy $ +管道+ takeUntil + ngOnDestroy）。

很快见，祝你好运！

Answer 2

一种可能的方法是在共享服务中使用BehaviorSubject。