Я создаю приложение в angular 7, в котором у меня есть дерево в боковом меню навигации.
Пример дерева приведен ниже:
То, чего я хочу достичь, это
- Если я нажму Purple, мой URL должен быть сформирован с полной иерархией -
/ овощи / лук / фиолетовый
- Приложение должно открыть страницу, если я введу ниже URL
локальный: 4000 // овощи / лук / фиолетовый
мой код как ниже
sidenav.component.ts
import {Component, OnInit} from '@angular/core';
import {BlogService} from '../../../services/blog.service';
export interface Files {
name: string;
reference: string;
isExpanded: boolean;
children: Files[];
}
@Component({
selector: 'app-sidenav',
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.css'],
})
export class SidenavComponent implements OnInit {
files: Files[];
selectedPath: string;
constructor(private blogService: BlogService) {
}
ngOnInit() {
this.blogService
.getTreeNodes()
.subscribe((files: []) => {
this.files = files;
});
}
toggleState(item: Files) {
item.isExpanded = !item.isExpanded;
}
nodeSelectEvent(reference: string, event: any) {
this.selectedPath = '';
this.blogService.selectedNode.next(reference);
this.selectedPath = reference + '/' + this.selectedPath;
this.getHierarchicalPath(event.target.parentElement.parentElement.parentElement);
this.blogService.selectedNode.next(this.selectedPath);
}
getHierarchicalPath(element: Element) {
const parentReference = element.getAttribute('id');
if (parentReference) {
this.selectedPath = parentReference + '/' + this.selectedPath;
this.getHierarchicalPath(element.parentElement.parentElement);
}
}
}
sidenav.component.html
<div class="row">
<div class="col-md-12">
<div id="google_translate_element"></div>
</div>
</div>
<div class="container sidenav-tree">
<ng-template #recursiveList let-files>
<div *ngFor="let item of files">
<div class="row node-item {{item.reference}}">
<div class="col-xs-1">
<i
data-toggle="collapse"
attr.data-target="#{{item.reference}}"
class="fa"
[ngClass]="{'fa-chevron-down': item.isExpanded, 'fa-chevron-right': !item.isExpanded}"
*ngIf="!(item.children.length===0)"
(click)="toggleState(item)"></i>
</div>
<div class="col-xs-11 node-text" (click)="nodeSelectEvent(item.reference, $event)">
{{item.name}}
</div>
</div>
<div
id="{{item.reference}}"
class="container collapse"
*ngIf="!(item.children.length===0)">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
</div>
</div>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: files }"></ng-container>
</div>
и blog.service.ts
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';
import {HttpClient} from '@angular/common/http';
@Injectable()
export class BlogService {
public selectedNode: Subject<string> = new Subject<string>();
public sideNavDisabled: Subject<boolean> = new Subject<boolean>();
constructor(private http: HttpClient) {
}
public getTreeNodes() {
return this.http.get('/assets/tree.json');
}
}
Проблема в том, что это может быть любой уровень иерархии, и иерархия также полностью динамична. Сейчас я просто хочу получить иерархию при вводе URL и распечатать ее на консоли. Хотя я буду использовать dynamic-html для загрузки данных из иерархии, которые будут загружены в компонент контента. Итак, у меня есть только один компонент, в который я буду загружать статические html файлы
Пожалуйста, предложите мне способы сделать эту работу.
Мой код можно найти здесь - https://stackblitz.com/github/vibhorgoyal18/atest-blog