如何通过 observable 将数据从一个组件发送到另一个组件并在 Angular 的第二个 html 模板中显示数据

Question

您好，我正在尝试在单击事件上将对象从 1. Component 发送到 2. Component。 目前，我使用具有获取和设置功能的数据服务来尝试此操作：

setDataObject(obj) { 
 this.subject.next(obj) 
}

getDataObject(obj): Observable <any> {
 return this.subject.asObservable() 
}

在 1. 组件上，我在 cliick 事件上触发 setDataObject(obj)。 在 2. Component 我现在不确定如何正确订阅 Observable 并且可以将对象从 1.Component 保存到另一个变量。 但我读到你不应该那样使用可观察的。 那么如何在我的 HTML 模板中显示对象及其属性呢？ 我已经尝试过：

*ngIf = "observable$ | async as myObj"

但是虽然我的 console.log 显示了 obj，但它没有显示在模板中。

Answer 1

这是一个简单的示例，说明如何在基本服务中设置 observable，然后从另一个组件订阅它。

从 observable 接收值后，您可以使用异步管道 observable 在调用组件的 HTML 模板中显示它。

Service

TS

@Injectable()
export class Service {
  subject: Subject<number> = new Subject();

  setDataObject(obj) { 
    this.subject.next(obj); 
  }
  
  getDataObject(): Observable<any> {
    return this.subject; 
  }
}

Client Component

TS

下面的代码我们在不订阅它的情况下初始化异步 observable，并提供了一种方法来使用随机数在服务中设置 observable 的值。

export class AppComponent {
  displayObservable$: Observable<number>;

  constructor(private api: Service) {

  this.displayObservable$ = api.getDataObject().pipe(
      map((res) => {
        console.log('value from service = ' + res);
        return res;
      })
    );
  }

  sendValue(val: any) {
    let num: number = Math.floor(Math.random() * 100);
    console.log('value sent to service = ' + num);
    this.api.setDataObject(num);
  }
}

HTML

以下 HTML 包含一个按钮，用于向服务分派值，以及一个用于显示响应的async observable：

<div>Value from service = {{ displayObservable$ | async }}</div>

<p>
  <button
    type="button"
    class="btn btn-primary"
    id="btnSendValue"
    (click)="sendValue($event)">
    Send a value to service
  </button>
</p>