Model类中的递归方法

Question

我有一个名为Material的对象。每种材料都可以有一种父材料。

在我的组件html中，我想以递归方式显示Material的Parent和Material的Parent。我怎么能这样做并在简单对象上调用方法？甚至可以在打字稿模型类中添加额外的get方法吗？ 感谢

Angular 5

Answer 1

这应该是可能的。只要该材质具有父对象，您就可以创建一个递归显示对象的特殊组件。

组件

export class ExampleComponent {
  @Input() public material: Material;
  @Input() public index = 0;
}

index用于确定树的深度，以便进行格式化。

模板

<div style="display: inline-flex; flex-direction: column; align-items: flex-end;">
  <example *ngIf="!!material.parent"
           [material]="material.parent" [index]="index + 1"></example>
  <div [style.marginRight.px]="10 * index">{{material.name}}</div>
</div>

虽然这样可行但是编写一个方法来展开树结构并将其转换为有序数组可能更容易。在我看来，这将是一个更容易思考的心理模型，然后不得不考虑如何设计递归模板。

Plnkr

获取祖先的递归方法

public getAncestors() {
  if (!this.parent) {
    return [];
  }

  return [this.parent, ...this.parent.getAncestors()];
}