angular tree-root自定义显示模板和设置默认选中项并高亮显示

在树形控件中，默认每一个节点只是显示它的名字，如果还想显示其他的，就需要自定义显示模板，一开始采用的ng-zorro的控件nz-tree，但是没有可以自定义显示模板的属性，然后一顿找，发现了tree-root，这个神奇的控件。

版本

Angular Tree Component 8.x.x支持angular release版本6.0及以上，对于低版本的angular，请安装Angular Tree Component 7.x.x

安装

1 npm install --save angular-tree-component
2 在styles.scss,导入Css,我的是在src文件下的styles.less，后缀名可能不一样，只要文件名一样就可以，之前我没有导入，只显示父节点，对于子节点的数据不显示；

@import '~angular-tree-component/dist/angular-tree-component.css';

3 import module,在app.module.ts文件中导入

import { TreeModule } from 'angular-tree-component';

@NgModule({
  imports: [..., TreeModule.forRoot()],
  ...
})
export class AppModule {
  ...
}

4 测试一下可不可以用：
.html文件

.ts文件

nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' }
      ]
    },
    {
      id: 4,
      name: 'root2',
      children: [
        { id: 5, name: 'child2.1' },
        {
          id: 6,
          name: 'child2.2',
          children: [
            { id: 7, name: 'subsub' }
          ]
        }
      ]
    }
  ];
  options = {};

options

它有很多属性可供选择
比如说displayField

nodes = [
    {
      nodeid: 1,
      nodename: 'root1',
      children: [
        { id: 2, name: 'child1' },