Angular 容器 @input 的 observable 属性答案

【问题标题】：Angular container @input property of observableAngular 容器 @input 的 observable 属性
【发布时间】：2019-08-08 22:37:56
【问题描述】：

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

PlanContext {
     Plan: Plan;

     //Other fields

}

好的，所以我们已经有了 planContext，我在 reducer 中处理存储和/或服务调用，以便处理基于不同端点的锁定。

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>

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

【问题讨论】：

标签： angular typescript observable ngrx

【解决方案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>

【讨论】：