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

您可以定义自定义https://developer.xamarin.com/guides/xamarin-forms/advanced/skiasharp/curves/information/。这将允许您向每个节点模板添加自定义类。

<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>

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

2 个答案: