在Angular 6中,可以通过以下步骤实现Mat-tree-node的选择/点击事件:
import { MatTreeModule } from '@angular/material/tree';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
MatTreeModule,
MatIconModule
]
})
export class AppModule { }
{{node.item}}
{{node.item}}
import { Component } from '@angular/core';
import { MatTreeNestedDataSource } from '@angular/material/tree';
import { NestedTreeControl } from '@angular/cdk/tree';
import { SelectionModel } from '@angular/cdk/collections';
interface TreeNode {
item: string;
children?: TreeNode[];
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
treeControl = new NestedTreeControl(node => node.children);
dataSource = new MatTreeNestedDataSource();
checklistSelection = new SelectionModel(true /* multiple */);
constructor() {
this.dataSource.data = [
{
item: 'Node 1',
children: [
{ item: 'Child node 1' },
{ item: 'Child node 2' },
{ item: 'Child node 3' }
]
},
{
item: 'Node 2',
children: [
{ item: 'Child node 4' },
{ item: 'Child node 5' }
]
}
];
}
hasChild = (_: number, node: TreeNode) => !!node.children && node.children.length > 0;
}
以上代码示例展示了如何使用Mat-tree和Mat-tree-node来显示树形结构,并通过Mat-checkbox实现选择效果。通过SelectionModel的toggle方法来处理选择/点击事件,并通过treeControl来控制展开/折叠状态。你可以根据自己的需求进行修改和扩展。