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

Question

您好，我正在尝试将一个对象从 1.Component 发送到 2.Click 事件的组件。目前，我使用具有获取和设置功能的数据服务进行尝试：

服务

@Injectable({
  providedIn: 'root'
})
export class Service{

 private subject = new Subject<any>();

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

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

在 1.Component 上，我在单击事件时触发了 setDataObject(obj)。

父组件HTML

<tbody>
 <tr *ngFor="let item of tableElements;" (click)="onSelect(item)">
 ...

1.组件

export class ParentComponent {

 constructor(private service: Service) { }

 onClick(obj: object) {
    this.service.setDataObject(obj);
 }
}

关于 2.Component 我现在不确定如何正确订阅 Observable 并且只能将对象从 1.Component 保存到另一个变量。但是我读到你不应该那样使用 observable。

2。组件

export class ChildComponent {
  displayObservable$: Observable<any>;

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

那么如何在我的 HTML-Template 中显示对象及其属性？我已经试过了：

子组件HTML

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

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

Answer 1

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

从 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

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

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 可观察以显示响应：

<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>

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

How to send data from one component to another via observable and display the data in the secound html template in Angular

javascript

observable

rxjs

typescript

angular