如何在使用RxJS的Angular10应用程序中触发事件？

我从Angular10开始。我写了一幅画布，可以在上面画画。让我们把我在画布上画的东西叫做Foobar——我的Foobar的Angular10绘图代码工作得很好。我正在使用HttpClient从REST调用中获得一个Foobar，这也很好，因为在我执行REST调用时，它会填充this.Foobar。我想做的是让画布观察this.foobar“model”，这样当this.foobar更改时，画布就会重新绘制foobar

这是否意味着我用RxJS使Foobar成为可观察的对象？如果是，我该怎么做？然后是this.foobar.subscribe（（）=>{this.canvas.drawFoobar（）}）。如何使Foobar成为可观察的对象？我需要扩展Foobar Typescript类吗

一旦我让Foobar工作起来（我是一个优秀的javaswing程序员），如何手动触发Foobar更改事件？假设我修改了Foobar并想触发一个modelChanged事件（比如在Swing中），那么在RxJS中该怎么做呢

---

请给我一些提示，让我朝正确的方向走。是否有一个博客使用Java Swing监听概念解释RxJS？谢谢，非常感谢

主题是RxJS将命令式代码转换为功能性RxJS流的最常用方式。主题既是观察者又是可观察者，因此您可以强制编写

subject.next（value）

和

subject.subscribe（value=>{..}）

这里有一个将属性转换为流的简单模式。在这里，您不需要订阅

foobar

，而是可以订阅

foobar

，它是一个

行为主体

，表示在属性

foobar

上设置的值

private _foobar$ = new BehaviorSubject<Foobar>(new Foobar(/*default*/));

get foobarProp(): Foobar {
  return this._foobar$.value
}

set foobarProp(val: Foobar): void {
  this._foobar$.next(val);
}

private\u foobar$=new BehaviorSubject（new foobar（/*default*/）；
获取foobarProp（）：Foobar{
返回此值。\u foobar$.value
}
设置foobarProp（val:Foobar）：无效{
这个。_foobar$.next（val）；
}

---

this.\u foobar.next（val）不限于setter函数。你可以写在任何你喜欢的地方。
谢谢！我知道你让我朝着正确的方向走，我让它开始工作。对于其他具有相同任务的用户，这是我的解决方案（请原谅错误的打字脚本，我现在开始）：

app.component.ts

import { Component,OnInit, ViewChild } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { ApiService } from './api.service';
import { CanvasComponent } from './canvas/canvas.component';
import { Foobar } from './foobar';

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

export class AppComponent {
  title = 'FOOOBAR';

  foobarSubject:BehaviorSubject<Foobar>;
  @ViewChild(CanvasComponent) canvasComponent:CanvasComponent;

  constructor(private apiService: ApiService) {
  }

  ngOnInit() {
    console.log("ngInit() called");
    this.foobarSubject= new BehaviorSubject<Forbar>(null);
    this.registerFoobar();
  }

  go() {
    this.foobarSubject.subscribe(
      (data:Foobar) => {
        if (data != null) {
          console.log("foobar was not null, updating canvas");          
          this.canvasComponent.update(data);
        }
      }
    );
  }

  // Register the callback containing the REST call 
  // so that it loads the next Foobar in the foobarSubject
  registerFoobar() {
    console.log("getting foobar");
    this.apiService.getFoobarObservable().subscribe(
      (foobar:Foobar) => {this.foobarSubject.next(foobar)},
      (err) => console.error(err),
      () => console.log("foobar: + this.foobarSubject.value.toString())
    );
  }
}

从'@angular/core'导入{Component，OnInit，ViewChild}；
从“rxjs”导入{BehaviorSubject}；
从“/api.service”导入{ApiService}；
从“./canvas/canvas.component”导入{CanvasComponent}；
从“/Foobar”导入{Foobar}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题=‘FOOOBAR’；
Foobar主题：行为主题；
@ViewChild（CanvasComponent）CanvasComponent:CanvasComponent；
构造函数（专用apiService:apiService）{
}
恩戈尼尼特（）{
log（“调用了ngInit（））；
this.foobarSubject=newbehaviorsubject（null）；
这个.registerFoobar（）；
}
go（）{
this.foobarSubject.subscribe(
（数据：Foobar）=>{
如果（数据！=null）{
log（“foobar不为null，正在更新画布”）；
此.canvasComponent.update（数据）；
}
}
);
}
//注册包含REST调用的回调
//以便加载foobarSubject中的下一个Foobar
registerFoobar（）{
log（“获取foobar”）；
this.apiService.getFoobarObservable（）.subscribe(
（foobar:foobar）=>{this.foobarSubject.next（foobar）}，
（错误）=>控制台错误（错误），
（）=>console.log（“foobar:+this.foobarSubject.value.toString（））
);
}
}

app.component.html

<h1>Hello {{title}}</h1>
<app-canvas></app-canvas>

<button mat-button matSuffix mat-icon-button aria-label="Go" title="Go"
(click)="go()">GO</button>

Hello{{title}
去

app.service.html

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Foobar } from './foobar';

    const remoteUrl = 'http://localhost:8080/foobar;
    
    @Injectable({
      providedIn: 'root'
    })
    export class ApiService {
    
      constructor(private http: HttpClient) { }
    
      getFoobarObservable(): Observable<Foobar> {
        return this.http.get<Foobar>(remoteUrl);
      }
    }

从'@angular/common/http'导入{HttpClient}；
从“@angular/core”导入{Injectable}；
从“rxjs”导入{Observable}；
从“/Foobar”导入{Foobar}；
常量远程URL=http://localhost:8080/foobar;
@注射的({
providedIn:'根'
})
出口级服务{
构造函数（私有http:HttpClient）{}
getFoobarObservable（）：可观察{
返回此.http.get（remoteUrl）；
}
}
使用。
this.foobar=new Subject（）；