私はangular 6を使用しており、2つのコンポーネントがあります。1つはメインコンポーネントで、もう1つはダイアログボックス用です。ツリーのあるダイアログボックスを開くボタンがあります。ツリー ノードにはチェックボックスがあります。押したときにチェックした項目を閉じて保存したいボタンがあります。ダイアログ ボックスを閉じたときに項目を制御する方法がわかりません。そして、main.component.ts でダイアログ コンポーネントを使用します。コードは次のとおりです。
main.component.ts
export interface DialogData {
role_name: string;
description: string;
permission: string[];
}
export class TodoItemNode {
children: TodoItemNode[];
item: string;
}
/** Flat to-do item node with expandable and level information */
export class TodoItemFlatNode {
item: string;
level: number;
expandable: boolean;
}
const TREE_DATA = {
'Dashboard': null,
'Reports': null,
'Settings': {
'Station Management': {
'Station': null,
'Work Shift': null,
'Fuel Price': null,
'Tank Management': null
},
'User Management': {
'Users': null,
'Groups': null
},
'Assets': {
'Dispensers': null,
'Tank Monitor': null
},
'Security': {
'Admin Roles': null
}
}
};
@Injectable()
export class ChecklistDatabase {
dataChange: BehaviorSubject<TodoItemNode[]> = new BehaviorSubject<TodoItemNode[]>([]);
get data(): TodoItemNode[] { return this.dataChange.value; }
constructor() {
this.initialize();
}
initialize() {
// Build the tree nodes from Json object. The result is a list of `TodoItemNode` with nested
// file node as children.
const data = this.buildFileTree(TREE_DATA, 0);
// Notify the change.
this.dataChange.next(data);
}
buildFileTree(value: any, level: number) {
const data: any[] = [];
// tslint:disable-next-line:forin
for (const k in value) {
const v = value[k];
const node = new TodoItemNode();
node.item = `${k}`;
if (v === null || v === undefined) {
// no action
} else if (typeof v === 'object') {
node.children = this.buildFileTree(v, level + 1);
} else {
node.item = v;
}
data.push(node);
}
return data;
}
insertItem(parent: TodoItemNode, name: string) {
const child = <TodoItemNode>{item: name};
if (parent.children) {
parent.children.push(child);
this.dataChange.next(this.data);
}
}
updateItem(node: TodoItemNode, name: string) {
node.item = name;
this.dataChange.next(this.data);
}
}
//////////// Admin roles component where we did CRUD functions!
@Component({
selector: 'app-admin-roles',
templateUrl: './admin-roles.component.html',
styleUrls: ['./admin-roles.component.css']
})
export class MainComponent implements OnInit {
displayedColumns = ['role_name', 'description', 'permissions', 'actions'];
dataSource;
adminRoles;
role_name: string;
description: string;
permission:string[];
constructor(public dialog: MatDialog, private adminRoleService: AdminRolesService) { }
ngOnInit() {
}
openPermissionDialog(role?) {
console.log(role);
const dialogRef = this.dialog.open(DialogPermissionComponent, {
width: '640px',
disableClose: true,
data: { role_name: role ? role.role_name:this.role_name, description: role? role.description:this.description, permission: role? role.permission:this.permission }
});
dialogRef.afterClosed().subscribe(result => {
console.log(result);
})
}
////////////
//////////// permission component where we set permissions
@Component({
selector: 'app-dialog-content-example-dialog',
templateUrl: './permission/dialog-permission-dialog.html',
styleUrls: ['./permission/dialog-permission-dialog.css'],
providers: [ChecklistDatabase]
})
export class DialogPermissionComponent {
/** Map from flat node to nested node. This helps us finding the nested node to be modified */
flatNodeMap: Map<TodoItemFlatNode, TodoItemNode> = new Map<TodoItemFlatNode, TodoItemNode>();
/** Map from nested node to flattened node. This helps us to keep the same object for selection */
nestedNodeMap: Map<TodoItemNode, TodoItemFlatNode> = new Map<TodoItemNode, TodoItemFlatNode>();
/** A selected parent node to be inserted */
selectedParent: TodoItemFlatNode | null = null;
/** The new item's name */
newItemName = '';
treeControl: FlatTreeControl<TodoItemFlatNode>;
treeFlattener: MatTreeFlattener<TodoItemNode, TodoItemFlatNode>;
dataSource: MatTreeFlatDataSource<TodoItemNode, TodoItemFlatNode>;
/** The selection for checklist */
checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);
constructor(private database: ChecklistDatabase, public dialogRef: MatDialogRef<DialogPermissionComponent>, @Inject(MAT_DIALOG_DATA) public data1: DialogData) {
this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
this.isExpandable, this.getChildren);
this.treeControl = new FlatTreeControl<TodoItemFlatNode>(this.getLevel, this.isExpandable);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
database.dataChange.subscribe(data => {
this.dataSource.data = data;
});
}
getLevel = (node: TodoItemFlatNode) => node.level;
isExpandable = (node: TodoItemFlatNode) => node.expandable;
getChildren = (node: TodoItemNode): Observable<TodoItemNode[]> => {
return ofObservable(node.children);
}
hasChild = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.expandable;
hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.item === '';
transformer = (node: TodoItemNode, level: number) => {
// tslint:disable-next-line:no-non-null-assertion
const flatNode = this.nestedNodeMap.has(node) && this.nestedNodeMap.get(node)!.item === node.item
// tslint:disable-next-line:no-non-null-assertion
? this.nestedNodeMap.get(node)!
: new TodoItemFlatNode();
flatNode.item = node.item;
flatNode.level = level;
flatNode.expandable = !!node.children;
this.flatNodeMap.set(flatNode, node);
this.nestedNodeMap.set(node, flatNode);
return flatNode;
}
/** Whether all the descendants of the node are selected */
descendantsAllSelected(node: TodoItemFlatNode): boolean {
const descendants = this.treeControl.getDescendants(node);
return descendants.every(child => this.checklistSelection.isSelected(child));
}
/** Whether part of the descendants are selected */
descendantsPartiallySelected(node: TodoItemFlatNode): boolean {
const descendants = this.treeControl.getDescendants(node);
const result = descendants.some(child => this.checklistSelection.isSelected(child));
return result && !this.descendantsAllSelected(node);
}
todoItemSelectionToggle(node: TodoItemFlatNode): void {
this.checklistSelection.toggle(node);
const descendants = this.treeControl.getDescendants(node);
this.checklistSelection.isSelected(node)
? this.checklistSelection.select(...descendants)
: this.checklistSelection.deselect(...descendants);
}
OnClose() {
this.dialogRef.close();
}
}
/////////////
main.component.html:
<button mat-button-sm (click)="openPermissionDialog()" mat-icon-button aria-label="Open card menu">
dialog.html
<mat-dialog-content>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding >
<button mat-icon-button disabled></button>
<mat-checkbox class="checklist-leaf-node"
[checked]="checklistSelection.isSelected(node)"
(change)="checklistSelection.toggle(node);">{{node.item}}</mat-checkbox>
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding>
<button mat-icon-button disabled></button>
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.filename">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<mat-checkbox [checked]="descendantsAllSelected(node)"
[indeterminate]="descendantsPartiallySelected(node)"
(change)="todoItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
</mat-tree-node>
</mat-tree>
</mat-dialog-content>
<mat-dialog-actions>
<button class="mat-button" mat-button (click)="OnClose()">Cancel</button>
<button class="mat-button" mat-button [mat-dialog-close]="data1" cdkFocusInitial color="primary">Create</button>
</mat-dialog-actions>