Question

我不确定如何确切地解决我的问题，但是我要解决的是如何从可观察对象中提取属性以用作@input。我担心我的方法从根本上来说是有缺陷的，但让我们想象一下这种情况。我正在做的是使用下面的对象（PlanContext）（实际上是一个包装器类）作为我容器的输入，该输入派生了一些不同的元数据位。

PlanContext {
     Plan: Plan;

     //Other fields

}

好，所以我们有了planContext，我正在处理reducer中的store和/或service调用，以便根据不同的端点处理锁定。

export class EditPlanPageComponent extends BaseComponent implements OnInit {
      public planContext$: Observable<PlanContext>;
      public planContext: PlanContext;
      public plan$: Observable<Plan>; ???
      public plan: Plan;              ????

      ngOnInit() {
        this.planContext$ = this.route.snapshot.data["planContext"];
        this.planContext$.subscribe(pc => {
           this.planContext = pc;

        });
        //this.plan/this.plan$  = ????? Pipe?
      } 
}

我拥有的HTML是这样的：

<div class="fixed-top">
  <plan-nav [plan]="????" </plan-nav>
  <read-costsummary-page [plan]="????"> </read-costsummary-page>
  <read-plancontextsummary-page [(planContext)]="planContext"> </read-plancontextsummary-page>     
</div>

但是，似乎所有计划参考都无法正常工作。我尝试了许多方法。我应该采取这个一般概念的方法吗？我的意思是：如果我有一个可观察的对象，并且我想让一个组件仅使用它的一个属性并显示更改，那么应该如何构造它？

Answer 1

您可以使用pluck运算符专注于数据流的属性。您可以找到更多详细信息here

根据您的情况，您可以按照以下方式转换代码：

export class EditPlanPageComponent extends BaseComponent implements OnInit {
      public planContext$: Observable<PlanContext>;
      public plan$: Observable<Plan>; ???

      ngOnInit() {
        this.planContext$ = this.route.snapshot.data["planContext"];
        this.plan$ = this.planContext$.pipe(pluck('Plan'));
      } 
}

在您的html模板中，您使用如下所示的管道异步

<div class="fixed-top">
  <plan-nav [plan]="plan$ | async"> </plan-nav>
  <read-costsummary-page [plan]="plan$ | async"> </read-costsummary-page>
  <read-plancontextsummary-page [(planContext)]="planContext$ | async"> </read-plancontextsummary-page>     
</div>

角容器@input属性的可观察

1 个答案: