Question

我对Angular的最佳实践有疑问。我在我的Angular4应用程序中使用ngrx库，所以我有这样一个规范化的状态树：

"objects": {
    "1": {
      "id": 1,
      "name": "name1",
      "type": "object",
      "parentId": null
    },
    "2": {
      "id": 2,
      "name": "name2",
      "type": "object",
      "parentId": 1
    }
  },
"selectedId": 2

所以，如果我想在我的组件模板中使用所选对象，我必须编写复杂的结构，如：

<div *ngIf="(objects$ | async)[(selectedId$ | async)] as selectedObject">
    {{ selectedObject?.name }}
</div>

它看起来很好。当我尝试引用所选对象的父级时，它看起来更糟。结构完全不可读：

<div *ngIf="(objects$ | async)[(objects$ | async)[(selectedId$ | async)].parentId] as parentOfSelectedObject">
    {{ parentOfSelectedObject?.name }}
</div>

我试图通过分成更小的部分来解决这个问题：

<ng-container *ngIf="(objects$ | async)[(selectedId$ | async)] as selectedObject">
    <div *ngIf="(objects$ | async)[selectedObject.parentId] as parentOfSelectedObject">
        {{ parentOfSelectedObject.name }}
    </div>
</ng-container>

但我仍然相信有一种为整个组件模板声明变量的最佳方法。是吗？这样的事情：

<declare-tag *declare="(objects$ | async)[(selectedId$ | async)] as selectedObject" />
<declare-tag *declare="(objects$ | async)[selectedObject.parentId] as parentOfSelectedObject" />

<div *ngIf="parentOfSelectedObject">
    {{ parentOfSelectedObject.name }}
</div>

你在组件的HTML中使用Observable的方式是什么？或者我可能不明白如何在我的组件中正确使用状态树？拜托，我等着答案。

如何声明变量＆＃34; as＆＃34;对于组件的模板

0 个答案: