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

20 浏览
0 Comments

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

我刚接触angular，遇到了以下情况：我有一个服务getAnswers():Observable[]>，还有两个相关的组件：\n

    \n

  • online-quote

    • \n

  • dynamic-form

    • \n

\nonline-quote组件在ngOnInit()方法中调用服务getAnswers():Observable[]>，并将结果传递给组件dynamic-form。\n为了说明这种情况，这是我的两个组件的代码：\nonline-quote.component.html:\n

\nonline-quote.component.ts:\n

@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;
  constructor(private service: DynamicFormService) {
   }
  ngOnInit() {
    this.answers$=this.service.getAnswers("CAR00PR");
  }
}

\ndynamic-form.component.html:\n

\ndynamic-form.component.ts:\n

@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[];
  constructor(private qcs: AnswerControlService, private service: DynamicFormService) {  }
  ngOnInit() {
    this.form = this.qcs.toFormGroup(this.answers);
  }
}

\n我的问题是，如果服务getAnswers():Observable[]>的结果是一个observable，那么从online-quote传递信息到dynamic-form的正确方式是什么。\n我尝试了很多方法，但都不起作用。我希望有人能帮助我解决这个问题。非常感谢！

0

3 答案

0 Comments

在Angular 4中，有一个问题是如何将可观察值传递给@Input()。解决这个问题的方法是使用BehaviorSubject。

BehaviorSubject是Subject的一种变体，它具有“当前值”的概念。它会将最新的值存储在其消费者中，并且每当新的Observer订阅时，它将立即从BehaviorSubject接收到“当前值”。假设OP声明的子组件总是需要最后一个发出的值，因此使用BehaviorSubject更加合适。

在OnlineQuoteComponent中，我们创建了一个answers$的BehaviorSubject，并将其初始化为null。然后，在ngOnInit中，我们订阅了来自service的数据，并使用answer$.next(data)来确保始终发出最后一个存储的值。

在HTML视图中，我们将answers$作为可观察对象传递给子组件app-dynamic-form。

在DynamicFormComponent中，我们在ngOnInit中订阅了answers，并在回调函数中处理异步可观察结果。这样，我们就可以使用answers创建表单。

通过使用BehaviorSubject和Observable，我们成功地解决了将可观察值传递给@Input()的问题。这种方法确保子组件始终能够获取到最新的值。

0
0 Comments

在Angular 4中，有一个问题是如何将observable值传递给@Input()。一位用户遇到了与OP几乎相同的情况，并且提出的解决方案对他也起作用。为了简单起见，这位用户找到了另一种在他的情况下有效且更简单的解决方案。他在模板中早期应用了async管道作为*ngIf结构指令的一部分，并使用变量将已经计算过的值传递到子组件中。

看起来很好，但是如何在app-dynamic-form组件中处理它呢？在app-dynamic-form中，它不再是一个Observable，而是一个AnswerBase[]。我认为OP不需要在那里更改任何代码。

如果他只是处理原始数据对象，可能不需要进一步操作，这就是一个可行的解决方案。然而，他正在将答案数据转换为一个表单组，所以在已接受的答案中提到的ngOnChanges方法可以很好地补充这个解决方案。

这个解决方案非常好，你可以在这里看到一个实现：angular-ivy-z9shje.stackblitz.io

可以使用ng-container而不是外部的div。

我相信在这种情况下我使用了

，是因为需要应用样式，但是我在简洁的示例中删除了样式。但你绝对是对的，也可以起作用。

0
0 Comments

问题的出现原因是在Angular 4中，当使用异步操作获取Observable值时，无法在DynamicFormComponent的创建（在ngOnInit中）时立即得到异步结果。解决方法有两种：

1. 在ngOnChanges生命周期钩子中监听answers的valueChange事件，并处理异步Observable结果。

ngOnChanges(changes) {
  if (changes.answers) {
    // 处理异步Observable结果
    this.form = this.qcs.toFormGroup(changes.answers.currentValue);
  }
}

2. 直接将Observable传递给DynamicFormComponent，并订阅它以监听结果。

online-quote.component.html:

dynamic-form.component.ts:

export class DynamicFormComponent implements OnInit {
  @Input() answers: Observable;
  ngOnInit() {
    this.answers.subscribe(val => {
      // 处理异步Observable结果
      this.form = this.qcs.toFormGroup(this.answers);
    })
  }
}

需要注意的是，第二种方法中的订阅操作没有进行取消订阅的机制，这可能导致内存泄漏问题。对于其他类型的Observable，这可能会成为一个问题。

0