Как реализовать этот angular трехкомпонентный асин c код данных?

Question

У меня проблемы с реализацией https://angular2-tree.readme.io/docs/async-data-1. Как мне переписать следующий код из OnInit, чтобы он был асинхронным c, как в документации?

this.client.get(API_URL, this.httpOptions).subscribe(
  (res) => { this.nodes.push(res) },
  (error) => { this.handleError(); }
);

Пожалуйста, также обратитесь к этому вопросу Как сохранить извлеченные данные HttpClient GET в переменную?

Answer 1

Создание дерева как асинхронного означает, что вы можете получить его дочерние элементы, когда их родительский узел расширяется, вместо того, чтобы сначала загружать все элементы.

Итак, сначала вы создадите массив узлов,

  nodes: any[] = [];

А в жизненном цикле ngOnInt вы можете просто добавить sh только узлы верхнего уровня, например,

ngOnInit() {
  this.client.get(API_URL_TO_FETCH_PARENT_NODES, this.httpOptions).subscribe(
    (res) => { this.nodes.push(res) },
    (error) => { this.handleError(); }
  );
}

Таким образом, после получения данных массив узлов должен выглядеть следующим образом:

    [
      {
        name: 'root1',
        hasChildren: true
      },
      {
        name: 'root2',
        hasChildren: true
      },
      {
        name: 'root3'
      }
    ];

Таким образом, свойство hasChildren также должно исходить из API-интерфейса бэкэнда, так что только компонент может понять, что этот конкретный узел имеет дочерние элементы и ему нужно извлекать данные из другого API.

Далее нам необходимо указать параметры в angular -tree-component, чтобы он мог понять, где нужно извлечь дочерние элементы.

 options: ITreeOptions = {
    getChildren: this.getChildren.bind(this),
    useCheckbox: true
  };

 getChildren(node: any) {
   return this.client.get(API_URL_TO_FETCH_CHILD_NODES_BY_PARENTID, this.httpOptions)
  }

Как только вы развернете родительский узел root1, getChildren будет вызываться библиотекой lib, а его дочерние элементы добавляются к это.

 template: `
    <tree-root #tree [options]="options" [nodes]="nodes"></tree-root>
 `,