Clarity + Angular6: прослушиватель узла древовидного представления (clr-tree-node)

Я пытаюсь отслеживать изменения, внесенные в источник данных узлов дерева. У каждого узла есть свойство selected, которое отражает статус выбора узла. Каждый раз, когда я выбираю узел, мне нужно передать выбор другому компоненту, который построит другое дерево в соответствии с этим выбором.

Я пробовал с интерфейсом 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 или что-то еще? Или какой-то другой механизм?

Заранее спасибо, Алекс.


angular angular6 angular-event-emitter clarity treenode
person Alex    schedule 10.11.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Насколько я вижу, вы уже привязаны к этому событию. Просто используйте длинную форму двухсторонней привязки:

шаблон.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>

компонент.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);
    }
}

Что-то вроде этого. Конечно, добавляйте типы данных везде, где это возможно.

person pascalpuetz    schedule 10.11.2018
comment
Хорошо спасибо! Мне не хватало привязки (clrSelectedChange) :-) - person Alex; 11.11.2018