У меня есть MatTreeView, генерирующий красивый TreeView для бокового меню навигации.
После загрузки страницы планируется развернуть узел соответствующей страницы (вместе со всеми родительскими узлами).
В меню навигации может быть несколько экземпляров главной страницы, как На главной странице есть разные уровни детализации, и это отражается в дереве навигации.
Поэтому я динамически загружал детали страницы в класс, который должен позволить мне создать массив элементов с помощью getElementsByClassName, а затем передать их в мою функцию expandNode.
Но использование getElementsByClassName не дает результата Результаты.
Ниже мой код:
Шаблон:
<mat-tree [dataSource]="dataSource1" [treeControl]="treeControl1">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="pageID{{node.item_text_link | SpaceToUnderscore }}">
<button mat-icon-button disabled></button>
<a *ngIf="node.page_id>1" href="page/{{node.page_id}}">
{{node.name}}
</a>
<div *ngIf="node.page_id<=1">
{{node.name}}
</div>
</mat-tree-node>
...
...
...
</mat-tree>
Контроллер:
expandNode(NodeId)
{
let pid = "pageID" + NodeId;
console.log("Expanding nodes for: " + pid);
var x = document.getElementsByClassName(pid);
console.log(x); <------ THIS IS EMPTY
Array.prototype.forEach.call(x, function(el) {
console.log(el);
this.customTreeControl.expandParents(el);
});
}
Через инспектора я знаю, что классы есть и правильные (включая орфографию).
Я попытался запустить метод expandNode в функции подписки, которая собирает данные для узлов дерева и устанавливает их в dataSource, так что я знаю, что они не будут вызываться в ближайшее время. Я также добавил кнопку для запуска этой функции, когда все загружены и оставлены на некоторое время, чтобы не было задержки загрузки, и эти классы все еще не найдены.
Скопируйте и вставьте нужное имя класса в поиск инспекторов. Функция находит его, когда я открываю соответствующий элемент.
Почему элементы не видны с getElementsByClassName?
Они скрыты, когда TreeMatView не развернут?
Редактировать: Это просто предложенный способ сделать это. Если есть лучший метод расширения узла и его родителей по ссылке на некоторые данные в этом узле, например, имя класса. Было бы здорово. Имейте в виду, что с этой ссылкой может быть несколько узлов. Я передаю данные в компонент из другого компонента. Например, если я передаю данные страницы «Цветок» (главная страница о цветах), я хочу, чтобы все узлы (и их родители), которые имеют отношение к «Цветку», расширялись. Я использовал идею наличия имени класса pageIdFlower. Сделай массив и обработай соответственно.
Спасибо,