Clarity + Angular6：树视图节点监听器（clr-tree-node）

Question

我正在尝试跟踪对树节点数据源所做的更改。每个节点都有一个selected属性反映节点selection状态，每次我select一个节点，我需要将 selection 发射到另一个组件，该组件将根据该 selection 构建另一棵树。

我尝试使用 OnChanges 接口，但我后来在文档中读到只有在再次设置数据时才会调用 ngOnChanges。

这是我的简单模板：

   <clr-tree-node [(clrSelected)]="selected" >
        Asset
        <ng-template [clrIfExpanded]="true">
            <clr-tree-node *ngFor="let asset of assets" [(clrSelected)]="asset.selected">
                {{asset.type}}
            </clr-tree-node>
        </ng-template>
    </clr-tree-node>

是否有我可以绑定的树节点事件，我可以使用它来发出（使用 EventEmitter）更改的数据？例如 onSelectionChange 或 onChange 或其他？或者还有什么机制？

提前致谢，亚历克斯

Answer 1

据我所知，您已经绑定到该事件。只需使用双向绑定的长格式：

template.html

<clr-tree-node [clrSelected]="selected" (clrSelectedChange)="changeSelected($event)">
    Asset
    <ng-template [clrIfExpanded]="true">
        <clr-tree-node 
            *ngFor="let asset of assets 
            [clrSelected]="asset.selected"
            (clrSelectedChange)="changeSelectedAsset(asset, $event)"
        >{{asset.type}}</clr-tree-node>
    </ng-template>
</clr-tree-node>

component.ts

@Component(...)
export class MyComp {
    @Output public structureChange:EventEmitter<...> = new EventEmitter<...>();

    public changeSelected(data):void {
        this.selected = data;
        this.structureChange.emit(data);
    }
    public changeSelectedAsset(asset, data):void {
        asset.selected = data;
        this.structureChange.emit(this.selected);
    }
}

像这样。当然，尽可能添加数据类型。

Clarity + Angular6：树视图节点监听器（clr-tree-node）

Clarity + Angular6: Tree View Node Listener (clr-tree-node)

treenode

clarity

angular

angular6

angular-event-emitter