在Angular 8中使用mat-tree和NgRx的解决方法可以通过以下步骤实现:
npm install @ngrx/store @ngrx/effects --save
npm install @angular/material --save
app.module.ts
文件中导入和配置所需的模块和服务:import { MatTreeModule } from '@angular/material/tree';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { TreeEffects } from './tree.effects';
import { treeReducer } from './tree.reducer';
@NgModule({
imports: [
MatTreeModule,
StoreModule.forRoot({ tree: treeReducer }),
EffectsModule.forRoot([TreeEffects])
],
...
})
export class AppModule { }
tree.actions.ts
文件来定义树的操作:import { createAction, props } from '@ngrx/store';
export const loadTree = createAction('[Tree] Load Tree');
export const treeLoaded = createAction('[Tree] Tree Loaded', props<{ treeData: any[] }>());
export const selectNode = createAction('[Tree] Select Node', props<{ node: any }>());
tree.effects.ts
文件来处理树的副作用:import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Store } from '@ngrx/store';
import { tap, switchMap, map } from 'rxjs/operators';
import { loadTree, treeLoaded } from './tree.actions';
@Injectable()
export class TreeEffects {
loadTree$ = createEffect(() =>
this.actions$.pipe(
ofType(loadTree),
switchMap(() => this.treeService.getTreeData()),
map(treeData => treeLoaded({ treeData })),
)
);
constructor(
private actions$: Actions,
private store: Store,
private treeService: TreeService
) { }
}
tree.reducer.ts
文件来管理树的状态:import { createReducer, on } from '@ngrx/store';
import { loadTree, treeLoaded, selectNode } from './tree.actions';
export interface TreeState {
treeData: any[];
selectedNode: any;
}
export const initialState: TreeState = {
treeData: null,
selectedNode: null
};
export const treeReducer = createReducer(
initialState,
on(treeLoaded, (state, { treeData }) => ({ ...state, treeData })),
on(selectNode, (state, { node }) => ({ ...state, selectedNode: node }))
);
import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { loadTree, selectNode } from './tree.actions';
@Component({
selector: 'app-tree',
template: `
{{ node.name }}
{{ node.name }}
`
})
export class TreeComponent implements OnInit {
treeData$ = this.store.pipe(select(state => state.tree.treeData));
constructor(private store: Store) { }
ngOnInit() {
this.store.dispatch(loadTree());
}
hasChild(_: number, node: any) {
return !!node.children && node.children.length > 0;
}
}
以上是使用mat-tree和NgRx的解决方法的示例代码。