树结构的嵌套动态路由

Question

我正在用 Angular 7 创建一个应用程序，其中我在侧导航菜单中有一个树。 示例树如下：

我想要实现的是

1. 如果我点击紫色，我的 URL 应该具有完整的层次结构 -

/蔬菜/洋葱/紫色

1. 如果我输入以下 URL，应用程序应该会打开页面

localhost: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

Answer 1

您尝试过通配符路由吗？您可以使用通配符，而不是声明特定路由：

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

并在组件中解析您的 URL。