如何将可观察值传递给@Input() Angular 4

Question

我是 Angular 新手，我有以下情况，即我有一个服务 getAnswers():Observable<AnswerBase<any>[]> 和两个相互关联的组件。

• 在线报价
• 动态形式

online-quote 组件在其ngOnInit() 方法中调用服务getAnswers():Observable<AnswerBase<any>[]>，并将其结果传递给组件dynamic-form。

为了说明情况，这是我的两个组件的代码：

在线报价.component.html：

 <div>
    <app-dynamic-form [answers]="(answers$ | async)"></app-dynamic-form>
</div>

在线报价.component.ts：

@Component({
  selector: 'app-online-quote',
  templateUrl: './online-quote.component.html',
  styleUrls: ['./online-quote.component.css'],
  providers:  [DynamicFormService]
})
export class OnlineQuoteComponent implements OnInit {

  public answers$: Observable<any[]>;

  constructor(private service: DynamicFormService) {

   }

  ngOnInit() {
    this.answers$=this.service.getAnswers("CAR00PR");
  }

}

动态表单.component.html：

<div *ngFor="let answer of answers">
 <app-question *ngIf="actualPage===1" [answer]="answer"></app-question>
</div>

动态表单.component.ts：

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css'],
  providers: [ AnswerControlService ]
})
export class DynamicFormComponent implements OnInit {
  @Input() answers: AnswerBase<any>[];

  constructor(private qcs: AnswerControlService, private service: DynamicFormService) {  }

  ngOnInit() {

    this.form = this.qcs.toFormGroup(this.answers);

  }

我的问题是，如果服务getAnswers():Observable<AnswerBase<any>[]> 的结果信息是可观察的，那么将信息从 online-quote 传递到 dynamic-form 的正确方法是什么.

我已经尝试了很多方法，但它不起作用。我希望有人能帮我解决这个问题。非常感谢！

Answer 1

假设DynamicFormService.getAnswers('CAR00PR')是异步（可能是），使用async Pipe传递异步结果是正确的方法，但是当@987654323时你不能指望现在得到异步结果@ 被创建（在 ngOnInit）因为 异步。运行以下代码行时，结果尚未准备好。

this.form = this.qcs.toFormGroup(this.answers);

有几种方法可以解决您的问题。

1。在ngOnChanges lifehook 处收听@Input() answers 的valueChange。

ngOnChanges(changes) {
  if (changes.answers) {
    // deal with asynchronous Observable result
    this.form = this.qcs.toFormGroup(changes.answers.currentValue);
  }
}

2。将 Observable 直接传递给 DynamicFormComponent 并订阅它以收听它的结果。

在线报价.component.html：

<app-dynamic-form [answers]="answers$"></app-dynamic-form>

动态表单.component.ts：

@Component({
  ...
})
export class DynamicFormComponent implements OnInit {
  @Input() answers: Observable<AnswerBase[]>;

  ngOnInit() {
    this.answers.subscribe(val => {
      // deal with asynchronous Observable result
      this.form = this.qcs.toFormGroup(this.answers);
    })
}

Answer 2

我有一个与 OP 几乎相同的用例，建议的解决方案也对我有用。

为了简单起见，我想出了一个适用于我的案例的不同解决方案，并且看起来更简单一些。我之前在模板中应用了异步管道作为 *ngIf 结构指令的一部分，并使用变量能够将已经评估的值传递给子组件。

<div *ngIf="answers$ | async as answers">
    <app-dynamic-form [answers]="answers"></app-dynamic-form>
</div>

Answer 3

我遇到了同样的问题，我创建了一个小型库，提供 ObservableInput 装饰器来帮助解决这个问题：https://www.npmjs.com/package/ngx-observable-input。该案例的示例代码为：

在线报价.component.html：

<app-dynamic-form [answers]="answers$ | async"></app-dynamic-form>

动态表单.component.ts：

@Component({
  ...
})
export class DynamicFormComponent implements OnInit {
  @ObservableInput() Input("answers") answers$: Observable<string[]>;

  ...
}

Answer 4

我的方法和建议是使用 BehaviorSubject 进行以下操作 原因 这是来自文档：

Subjects 的变体之一是 BehaviorSubject，它有一个 “当前值”的概念。它存储发出的最新值 它的消费者，并且每当有新的观察者订阅时，它将 立即从 BehaviorSubject 接收“当前值”。

我认为 OP 声明的子组件总是需要发出的最后一个值，因此我觉得 BehaviorSubject 会更适合这个。

在线报价.component

@Component({
  selector: 'app-online-quote',
  templateUrl: './online-quote.component.html',
  styleUrls: ['./online-quote.component.css'],
  providers:  [DynamicFormService]
})
export class OnlineQuoteComponent implements OnInit {

  public answers$: BehaviorSubject<any>;

  constructor(private service: DynamicFormService) {
       this.answers$ = new BehaviorSubject<any>(null);

   }

  ngOnInit() {
    
    this.service.getAnswers("CAR00PR").subscribe(data => {
            this.answer$.next(data); // this makes sure that last stored value is always emitted;
         });
  }

}

在html视图中，

<app-dynamic-form [answers]="answer$.asObservable()"></app-dynamic-form>

// 这会发出可观察的主题

现在您可以订阅子组件中的值。订阅答案的方式没有变化 动态form.component.ts

@Component({
  ...
})
export class DynamicFormComponent implements OnInit {
  @Input() answers: Observable<any>;

  ngOnInit() {
    this.answers.subscribe(val => {
      // deal with asynchronous Observable result
      this.form = this.qcs.toFormGroup(this.answers);
    })
}

Answer 5

将可观察对象传递给输入是要避免的，原因是：当检测到新输入时，您如何处理对前一个可观察对象的订阅？让我们澄清一下，可以订阅 observable，一旦您订阅，您有责任完成 observable 或取消订阅。一般来说，这甚至被认为是一种反模式，将 observables 传递给不是运算符的函数，因为您正在执行命令式编码，其中 observables 应该以声明方式使用，将一个传递给组件也不例外。

如果你真的想这样做，你需要非常小心，不要忘记取消订阅 observable。为此，您要么必须确保输入永远不会更改，要么专门完成对覆盖输入的任何先前订阅（嗯......就在它被覆盖之前）

如果您不这样做，您最终可能会出现泄漏，并且很难找到错误。因此，我会推荐以下 2 个替代方案：

• 要么使用共享存储服务，要么为特定组件“提供”它，看看https://datorama.github.io/akita/ 看看如何。在这种情况下，您根本不使用输入，您只会订阅注入的存储服务的查询。当多个组件需要异步写入和读取共享数据源时，这是一个干净的解决方案。

或者

• 为在输入更改时发出的组件创建一个可观察对象（BehaviourSubject、ReplaySubject 或 Subject）。

@Component({
  selector: 'myComponent',
  ...
})
export class DynamicFormComponent implements OnInit {

  // The Subject which will emit the input
  public myInput$ = new ReplaySubject();

  // The accessor which will "next" the value to the Subject each time the myInput value changes.
  @Input()
  set myInput(value){
     this.myInput$.next(value);
  }

}

当然要让输入发生变化，您将使用管道异步

<myComponent [myInput]="anObservable | async"></myComponent>