带有html的angular-tree-component样式节点

Question

我正在使用angular 5和angular-tree-component 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>