Вложенные динамические маршруты для древовидной структуры - PullRequest
0 голосов
/ 14 марта 2019

Я создаю приложение в angular 7, в котором у меня есть дерево в боковом меню навигации. Пример дерева приведен ниже:

enter image description here

То, чего я хочу достичь, это

  1. Если я нажму Purple, мой URL должен быть сформирован с полной иерархией -

/ овощи / лук / фиолетовый

  1. Приложение должно открыть страницу, если я введу ниже 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

1 Ответ

0 голосов
/ 14 марта 2019

Вы пробовали маршрутный символ? Вместо того, чтобы объявлять конкретный маршрут, вы можете использовать подстановочный знак:

{
  path: '**',
  component: TreeItemExampleComponent
}

И проанализируйте ваш URL внутри компонента.

...