Question

是否有一种方法可以直接访问可观察对象的“有效负载”，并在以后解决而不需要订阅？

例如，我知道我们可以做到。

export class RecordService
{
   fetchRecordFromServer():Observable<Record>
   {
       return http.get().pipe(map(result => return new Record())); // equivalent
   }  
}


export class MyComponent
{
  public record:Record = null;
  constructor(private recordService:RecordService) 
  {
     this.userService.fetchRecordFromServer().subscribe( record => 
     {
        this.record = record;
     }); 
  }
  getRecordName():string
  {
     return this.record? this.record.name || "";
  }
}

我只是想知道是否有一种捷径可以做这样的事情

export class MyComponent
{
  public record:Observable<Record>;
  constructor(private recordService:RecordService) 
  {
     this.record = this.userService.fetchRecordFromServer();
  }

  getRecordName():string
  {
     return this.record? this.record.name || "";
  }

}

我不确定我要问的是什么，但我认为我的想法是可以从类型为Observable的值分配一个值，并在Observable触发时解析，并且可以将其视为如果一直都是这样。

也许诺言可以做到这一点，或者这是一个非常愚蠢的问题。我只是觉得我想说'将这个变量设置为一个实例，它将很快在某个时刻实例化，但是您可以尝试立即安全地使用它，并且由于observable是类型，它将被视为输入...

Answer 1

我认为通过添加的代码，您正在尝试执行的操作是将UI直接绑定到热门的可观察对象。您可以使用异步管道来执行此操作： https://angular.io/api/common/AsyncPipe

来自documentation：

import { Component } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Component({
  selector: 'app-hero-message',
  template: `
      <h2>Async Hero Message and AsyncPipe</h2>
	    <p>Message: {{ message$ | async }}</p>
	    <button (click)="resend()">Resend</button>`,
})
export class HeroAsyncMessageComponent {
  message$: Observable < string > ;

  private messages = [
    'You are my hero!',
    'You are the best hero!',
    'Will you be my hero?'
  ];

  constructor() {
    this.resend();
  }

  resend() {
    this.message$ = interval(500).pipe(
      map(i => this.messages[i]),
      take(this.messages.length)
    );
  }
}

Answer 2

您可以在模板中使用async管道，以使组件内没有 subscribe 用法。

export class MyComponent
{
    public record$: Observable<Record>;
    constructor(private recordService:RecordService) 
    {
        this.record$ = this.userService.fetchRecordFromServer();
    }

    getRecordName(record: Record):string
    {
        return record ? record.name : "";
    }
}

在模板中

   <h1>{{getRecordName(records$ | async)}}</h1>

从可观察的对象“同步”访问返回对象

2 个答案: