Угловой 5-ти кнопочный узел на выделение в теме - PullRequest
Новая
       6

Угловой 5-ти кнопочный узел на выделение в теме

0 голосов
/ 15 сентября 2018

Я пытаюсь реализовать функциональность, которая выполняет следующие действия:

Когда узлы выбираются из иерархии TreeNode слева, они отображаются в порядке выбора справа. Мне удалось добиться этого с помощью EventEmitters, но сейчас я пытаюсь найти более простой / понятный способ сделать это.

Флажок-tree.component.ts: 

import { Component, EventEmitter, Output } from '@angular/core';
import { TreeNode } from './../../dto/TreeNode';
import { BaseTreeComponent } from './../base-tree/base-tree.component';
import { Subject } from 'rxjs/Subject';

import html from './checkbox-tree.component.html';
import css from '../fortune-select.component.css';

@Component({
  selector: 'checkbox-tree',
  template: html,
  styles: [css],
})

export class CheckboxTreeComponent<T> extends BaseTreeComponent<T> {
  rightSideSubject                  = new Subject<TreeNode<T>[]>();
  selections: TreeNode<T>[] = [];

  //gets called when a node is selected
  public selected():void {
    if(!this.linked || (this.currentNode.indeterminate && !this.currentNode.selected)) {
      this.dataChangedEvent();
      return;
    }

    this.currentNode.indeterminate = false;
    if(this.singleLevelOnly) {
      this.currentNode.selectChildrenSingleLevel(this.currentNode.selected);
    } else {
      this.currentNode.selectChildren(this.currentNode.selected);
    }

    this.selections.push(this.currentNode);
    this.rightSideSubject.next(this.selections);
    this.childChanged.emit();
    this.dataChangedEvent();
  }

}

В этой функции «currentNode» имеет значение текущего узла, который был выбран. Я хочу сохранить список, который имеет все узлы в порядке выбора. Я хочу подтолкнуть узел в теме всякий раз, когда он выбран. Как я могу это сделать? Текущий узел необходимо вставить в тему.

В другом компоненте я могу получить rightSideSubject в качестве ввода и отображения!

Как передать эти данные и вставить их в rightSideSubject, если выбрано?

1 Ответ

0 голосов
/ 15 сентября 2018

Для меня «база» этого типа компонента должна быть «многоразовой» в любом контексте.

Для этого ее необходимо использовать с «ngModel», модель может содержать простое значение или массив(для вашего случая), и вы можете легко проверить значение с помощью (ngModelChange).Это просто и стандартизировано.

Поначалу это может быть немного сложно понять, но вы и ваша команда приобретете знания, и это также будет работать с "formControlName", который может использоваться в некоторых ситуациях.

Хороший пример вы можете найти здесь https://medium.com/@tarik.nzl/angular-2-custom-form-control-with-validation-json-input-2b4cf9bc2d73

Вот несколько простых моих финальных кодов: https://github.com/xrobert35/asi-ngtools/blob/master/src/components/asi-switch/asi-switch. component.ts https://github.com/xrobert35/asi-ngtools/blob/master/src/components/common/default-control-value-accessor.ts

Обратите внимание, что в этом репозитории очень много «простых» композиций, работающих с [ngModel], из которого вы можете взять «пример», каждый компонент расширяет класс DefaultControlValueAccessor, заставляя каждый компонент повторять один и тот же «шаблон»

эта работа со значением массива: https://github.com/xrobert35/asi-ngtools/blob/master/src/components/asi-autocomplete/multiple/asi-autocomplete-multiple.component.ts

...