将属性公开为可观察对象的最简单语法？

Question

我看过一些教程，展示了在 Angular 中实现可观察量的多种不同方法。对于我的目的来说，其中许多似乎过于复杂。其他的是以前的版本，不再工作。

假设我有一个具有名为 的单个属性的服务numChickens，并且我希望允许组件订阅该属性。Do.i.really((need)=> to.chain((a)=>{million.garbledyGook().statements.to('gether)}) 才能实现这一点吗？

这是相关服务的代码：

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

@Injectable({
  providedIn: 'root'
})

export class ChickenService {

  public chickens: number; 

  constructor() { }

}

...这是将使用可观察对象的组件的代码：

import { Component, OnInit } from '@angular/core';
import { ChickenService } from '../chicken.service';

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

export class ChickenDisplayComponent implements OnInit {

  constructor(public cs: ChickenService) {
  }

  ngOnInit() {
  }

}

在 Angular 6 中，在 ChickenService 中公开属性以便组件类能够以可观察流的形式访问该属性的值的最简单、最直接、最易读的方法是什么？chickens或者组件模板可以使用异步管道显示值？

我怎么强调都不为过——拜托，不要在答案中包含 8,192 个字符的闭包墙，然后说“看，这很简单”。

我不仅为我自己问这个问题，也为像我这样的其他人问这个问题，他们试图将注意力集中在可观察的事情上，并在所有关于该主题的密集和过时的教程中挣扎。如果你能将这个解决方案简化为简单的形式，子孙后代将会感谢你。

Answer 1

最简单的方法是创建一个 private Subject，并使用它来创建您的 public Observable。

在下面的代码中，我为您的变量创建了一个getand 。这意味着每次您使用（例如）更新它时，它都会使用新值自动触发流上的新事件。setchickensservice.chickens = 10Observable

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class ChickenService {

  private _chickens: number; // Make this private so we can expose it via a get/set
  private chickenChange$ = new Subject<number>(); // This will be used to create our Observable
  public chickens$ = this.chickenChange$.asObservable(); // This is our Observable

  constructor() { }

  set chickens(val: number) {
    this._chickens = val; // Set the new value
    this.chickenChange$.next(val); // Trigger the subject, which triggers the Observable
  }

  get chickens() {
    return this._chickens;
  }

}