具有html的角树组件样式节点

Question

我使用的是角5和角树成分https://github.com/500tech/angular-tree-component.我想将一个节点的样式设置为不同于其他节点的样式。

import { Component, ViewChild} from '@angular/core';
import { TreeComponent } from 'angular-tree-component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  @ViewChild('myTree')
  private tree: TreeComponent;

  nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: '<b>child1</b>' },
        { id: 3, name: 'child2' }
      ]
    }
  ];
}

所以问题是，b标签被角化成\lt b \gt \lt b \gt。

如何以实际的角度生成HTML？

Answer 1

您可以定义自定义treeNodeTemplate。这将允许您向每个节点模板添加自定义类。

<tree-root [nodes]="nodes" [options]="options">
  <ng-template #treeNodeTemplate let-node let-index="index">
    <span [ngClass]="node.data.classes">{{ node.data.name }}</span>
  </ng-template>
</tree-root>

然后将css类传递给节点数据。

nodes = [
  {
    id: 1,
    name: 'root1',
    classes: ['text-bold'],
    children: [...]
  }
];

并最终定义该类

.text-bold{
  font-weight: 700;
}

您还可以更新模板，只使用innerHTML指令，这样就可以将html传递给name属性。

<ng-template #treeNodeTemplate let-node let-index="index">
  <span [innerHTML]="node.data.name"></span>
</ng-template>

Answer 2

一定要深深地应用

scss

/deep/ {
  .tree-wrapper {
    .tree-children {
      padding-left: 5px;
    }
  }
}

html

<div class="tree-wrapper">
    <tree-root
      [nodes]="menuItems | async | tableFilter: [menuFilterTerm]"
      [options]="options"
      (activate)="onSelectMenuItem($event)"
    >
    </tree-root>
  </div>