带有 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 标签通过 Angular 清理为 \lt b\gt\lt b\gt。

如何在 Angular 中实用地生成 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>