Angular 8：使用带有 NgRx 的 mat-tree答案

【问题标题】：Angular 8 : using mat-tree with NgRxAngular 8：使用带有 NgRx 的 mat-tree
【发布时间】：2020-04-11 11:57:34
【问题描述】：

几周前我用 Angular 8 和一些 Angular Material 开始了一个应用程序，当时我是框架的菜鸟……但我喜欢挑战！

App 最有趣的功能之一是显示一棵树，并在用户单击其中一个时动态查找下一个节点，方法是从远程 API 获取它们。

目前，我已经成功地使用 NgRx 管理我的全局存储，使用效果来发出请求、调度正确的操作、设置减速器、创建我的选择器......我也遵循了 Angular Material 的Tree with Dynamic Data example，但我没有'不知道示例使用的模式

这是我管理商店 + 请求的代码

// movies.actions.ts
export const MOVIES_ACTIONS_REQUEST_CHILDREN = 'movies/REQUEST_CHILDREN';
export const MOVIES_ACTIONS_REQUEST_CHILDREN_SUCCESS = 'movies/REQUEST_CHILDREN_SUCCESS';
export const MOVIES_ACTIONS_REQUEST_CHILDREN_ERROR = 'movies/REQUEST_CHILDREN_ERROR';

export class GetMovieChildren extends IAction {
  public static readonly type: string = MOVIES_ACTIONS_REQUEST_CHILDREN;

  constructor(
    public parentId: number,
  ) {
    super();
  }
}

export class getMoviesChildrenSuccess extends IAction {
  public static readonly type: string = MOVIES_ACTIONS_REQUEST_CHILDREN_SUCCESS;

  constructor(
    public children: Array<any>,
  ) {
    super();
  }
}

export class getMoviesChildrenError extends IAction {
  public static readonly type: string = MOVIES_ACTIONS_REQUEST_CHILDREN_ERROR;

  constructor(
    public error: any,
  ) {
    super();
  }
}

// movies.effects.ts
@Effect()
public getMoviesChildren$: Observable<IAction> = this.actions$.pipe(
  ofType(MOVIES_ACTIONS_REQUEST_CHILDREN),
  mergeMap((action) => {
    return this.movieService.getMoviesChildren(action.parentId)
    .pipe(
      map(children => new getMoviesChildrenSuccess(children),
      catchError(error => of(new getMoviesChildrenError(error))),
    );
  }),
);

// movies.services.ts
public getMoviesChildren(parentId: string): Observable<Array<any>> {
  return this.request.get(`http://localhost:9000/movies/${parentId}/children`)
  .pipe(
    map(formatResponseToJSON),
    catchError(errorHandle),
  );
}

// movies.reducer.ts
/** Should I manage a movies tree or an set of nodes in the reducer ? **/

我只想将此代码插入this one（带有动态数据部分的树），以便在用户单击节点时允许异步加载子节点。是否有人之前已经经历过这种情况并且可以帮助我实施异步树的步骤？是否有管理树的最佳实践（在 NgRx 商店中？）

谢谢！娟

PS：如果需要我可以放一些代码

【问题讨论】：

嗨，胡安，欢迎来到 StackOverflow。您可以粘贴您的代码，或创建一个stackblitz.com 以便我们提供帮助吗？请记住始终包含您正在处理的相关代码。
嘿@FRECIA，感谢您的提示！我正在编辑帖子以使其更好:)

标签： angular angular-material ngrx

【解决方案1】：

您可以在您的状态下维护展开（选中）节点的状态，并通过选择器获取您需要显示（根和展开）的节点。然后您可以实现 DataSource ，它利用该选择器向树组件提供数据。像这样的：

export class DynamicDataSource implements DataSource<Node> {

    constructor(
        private store: Store<State>,
        private treeControl: FlatTreeControl<Node>)
    {
    }

    connect(collectionViewer: CollectionViewer): Observable<Node[] | readonly Node[]> {
        this.treeControl.expansionModel.changed.subscribe(change => 
            {
                if ((change as SelectionChange<Node>).added)
                {
                    this.store.dispatch(fromActions.expandNodes({ids: change.added.map(node => node.id)}))
                }
                if ((change as SelectionChange<Node>).removed) 
                {
                    this.store.dispatch(fromActions.collapseNodes({ids: change.added.map(node => node.id)}))
                }
            }
        );
        return this.store.pipe(select(selectRootAndExpandedNodes));
    }

    disconnect(collectionViewer: CollectionViewer): void {} 
}

【讨论】：