Применить определенный стиль к рекурсивному угловому элементу ⇐ CSS

[Гость]

Я создаю этот рекурсивный компонент вложенного древовидного представления в Angular. Цель состоит в том, чтобы при выборе узла к этому узлу применялся стиль с помощью класса .node-active, а при выборе другого узла предыдущий примененный стиль должен быть удален и добавлен к текущему выбранному узлу. Он работает нормально для одного поддерева, но когда я выбираю другой узел из другого поддерева, стиль применяется и к другому поддереву. Вот ссылка на stackblitz - Stackblitz





Я применяю класс с помощью функции applyStyle на основе текущего кода узла и выбранного кода узла, который работает для одного поддерева, но не работает для другого. Любая помощь будет очень полезна.

tree.comComponent.ts

import { Component, EventEmitter, Input, Output } from '@angular/core'; @Компонент({ селектор: 'дерево приложений', templateUrl: './tree.comComponent.html', styleUrls: ['./tree.comComponent.css'], }) класс экспорта TreeComponent { Дерево @Input(): любое; @Output() selectedValue = новый EventEmitter(); общедоступный выбранный элемент: любой; toggleChild(узел) { this.selectedValue.emit(узел); node.showChildren = !node.showChildren; node.isOpen = !node.isOpen; } /* События не всплывают, поэтому родительское событие генерируется в * когда один из дочерних элементов генерирует событие - это создаст новый EventEmitter для каждого дочернего элемента. */ излучатьOnChildClicked (узел) { this.selectedValue.emit(узел); } applyStyle (узел) { console.log(узел); this.selectedItem = node.code; } } дерево.компонент.css

.open-btn { преобразование: поворот (90 градусов); позиция: абсолютная; слева: -30 пикселей; z-индекс: 10; } .close-btn { слева: -30 пикселей; позиция: абсолютная; z-индекс: 10; } .tree ли { тип стиля списка: нет; поле: 8 пикселей; положение: относительное; } .node-item { цвет: var(--lbl-color); отступ: 3 пикселя; } .зеленый { цвет фона: темно-красный; } .node-активный { события указателя: нет; фон: #379df1; радиус границы: 5 пикселей; белый цвет; } .node-item:hover { цвет фона: rgb(231, 231, 231); цвет: #0f0f0f; радиус границы: 5 пикселей; } .arrow-btn { ширина: 18 пикселей; высота: 18 пикселей; } .tree li::before { содержание: ''; позиция: абсолютная; верх: -7 пикселей; слева: -20 пикселей; левая граница: 1 пиксель сплошной #ccc; нижняя граница: 1 пиксель сплошной #ccc; граница-радиус: 0 0 0 0 пикселей; ширина: 20 пикселей; высота: 15 пикселей; } .tree li::after { позиция: абсолютная; содержание: ''; верх: 8 пикселей; слева: -20 пикселей; левая граница: 1 пиксель сплошной #ccc; border-top: 1px сплошной #ccc; граница-радиус: 0px 0 0 0; ширина: 20 пикселей; высота: 100%; } .tree li:last-child::after { дисплей: нет; } .tree li:last-child:before { граница-радиус: 0 0 0 5 пикселей; } ul.tree > li:first-child::before { левая граница: 1 пиксель сплошной #ccc; нижняя граница: 1 пиксель сплошной #ccc; } .label-контейнер { отображение: встроенный блок; } tree.comComponent.html

• {{ имя узла.имя }}

tree.mock.ts
интерфейс экспорта TreeNode { имя: строка; showChildren: логическое значение; дети: любой[]; код: строка; } экспортировать константные УЗЛЫ: TreeNode[] = [ { код: 'АФРИ', название: 'Африка', showChildren: ложь, дети: [ { код: 'АЛГЕ', название: «Алжир», showChildren: ложь, дети: [ { код: 'АРИС', название: 'Алгерис', showChildren: ложь, дети: [], }, { код: 'ACI2', название: 'Алжирский ребенок 2', showChildren: ложь, дети: [], }, ], }, { код: 'АНГО', название: «Ангола», showChildren: ложь, дети: [], }, { код: 'БЕНИ', название: «Бенин», showChildren: ложь, дети: [], }, ], }, { код: 'АЗИЯ', название: 'Азия', showChildren: ложь, дети: [ { код: 'AFGH', название: «Афганистан», showChildren: ложь, дети: [ { код: 'КАБУ', название: 'Кабул', showChildren: ложь, дети: [], }, ], }, { код: «АРМЕ», название: «Армения», showChildren: ложь, дети: [], }, { код: 'АЗЕР', название: 'Азербайджан', showChildren: ложь, дети: [], }, ], }, { код: 'ЕВРО', название: 'Европа', showChildren: ложь, дети: [ { код: 'РОМА', название: 'Румыния', showChildren: ложь, дети: [ { код: 'БУКУ', название: 'Бухарест', showChildren: ложь, дети: [], }, ], }, { код: 'ХУНГ', название: 'Венгрия', showChildren: ложь, дети: [], }, { код: 'БНИН', название: «Бенин», showChildren: ложь, дети: [], }, ], }, { код: «НОАМ», название: «Северная Америка», showChildren: ложь, дети: [], }, ];