您将如何将带有参数的可观察对象作为@Input 传递？答案

【问题标题】：How would you pass an observable with params as @Input?您将如何将带有参数的可观察对象作为@Input 传递？
【发布时间】：2020-05-09 18:26:06
【问题描述】：

目标是将一个 http 请求从组件 1 传递到组件 2，并将其参数设置在组件 2 上。

这是我的方法伪代码：

组件 1 HTML

<app-component-2 [obs]="obs"></app-component-1>

组件 1 TS

export class Component1 {

   obs : Observable<any>;      

   constructor(private service : SomeService){
     this.obs = this.service.method(param1 ,param2 ,param3);  //Passing param1, param2 and param3 as Inputs on Component2 is not an option 
  }
}

组件 2 TS

export class Component2{
  Input() obs : Observable<any>;
}

Obs：不能将 param1、param2 和 param3 作为输入传递

希望能很好地解释我的问题。提前致谢。

【问题讨论】：

可以，但是如果它是来自服务的 observable，为什么不直接在 component2 中注入服务呢？
@Soukyone 因为 component2 应该呈现一个未知对象的分页列表

标签： html angular typescript parameters observable

【解决方案1】：

如果你想传递一个 observable，你可以像普通对象那样做：

组件 1：

export class Component1 {

 obs : Observable<any>;      

 constructor(private service : SomeService){
  this.obs = this.service.method(param1 ,param2 ,param3);
 }
}

组件 2：

export class Component2 implements OnInit {

@Input() obsFromParent: Observable<any>;

ngOnInit() {
  this.obsFromParent.subscribe((data) => {// do what you want });
 }
}

如果您传递的 observable 是一个无限的 observable，请考虑在 Component2 的 ngOnDestroy 上取消订阅它。

【讨论】：

目标是将http请求从组件1传递到组件2并在组件2上设置其参数
所以，param1、param2 和 param3 在 component2 上，但是你想从 component1 传递 observable 吗？对吗？
是的，我不希望 param1,2 和 3 在 component2 上输入