Question

我已经尝试在ngrx下将Mat Tree与我的商店连接起来，但是我有很多问题。从https://stackblitz.com/edit/material-tree-dynamic开始，我想在商店中更改当前数据源；我想从存储的第一和第二级树中获取数据，对于别有用心的嵌套级，我想检查是否已经加载到存储中，否则我需要从API请求中加载它们（然后保存到存储中）。有这样的例子吗？或有人可以给我建议吗？

Answer 1

我实现了一个数据源，它以回调作为构造函数参数。在树组件中，我实例化了TreeControl和DataSource。通过回调，我可以针对商店发出/调度展开和折叠动作。我很好奇，您的解决方案是什么。

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.scss']
})
export class TreeComponent implements OnInit {
  nestedTreeControl: NestedTreeControl<Node>;
  dataSource: MyNestedTreeDataSource;

  // alternatively inject the store in the constructor
  // and dispatch the action directly in the callback
  @Output()
  expandNode = new EventEmitter<Node>();

  constructor() {
    this.nestedTreeControl = new NestedTreeControl<Node>(this._getChildren);
    this.dataSource = new MyNestedTreeDataSource(this.nestedTreeControl, this.onExpandNode.bind(this));
  }

  onExpandNode(node: Node): void {
    this.expandNode.emit(node);
  }

  private _getChildren = (node: Node) => of(node.children);
}

使用ngrx存储的Mat Tree Angular材质作为数据源

1 个答案: