0

我正在寻找一种方法来折叠（或扩展）我的侧导航，这取决于我在哪条路线上。我找到了一种使用按钮的方法，但是它会折叠所有子路由，而不是我当前所在页面的子路由。

HTML:

<ul>
  <li *ngFor="let item of subProducts">
    <a *ngIf="collapsed" (click)="expand()" [routerLinkActive]="['active']" href="/reporting/{{ item.dataobject.id }}">
      {{ item.dataobject.titel }}
    </a>
    <ul class="child-routes" [@collapse]="collapsed">
      <li *ngFor="let subItem of item.subproductdetail">
        <a *ngIf="!collapsed" (click)="collapse()" [routerLinkActive]="['active']" href="/reporting/{{ item.dataobject.id }}">
          {{ subItem.dataobject.titel }}
        </a>
      </li>
    </ul>
  </li>
</ul>

TS:

import { Component, OnInit } from '@angular/core';
import { SubProductService } from '../../core/http/sub-product.service';
import { AUTO_STYLE, animate, state, style, transition, trigger } from '@angular/animations'
// import { ActivatedRoute } from '@angular/router'

const DEFAULT_DURATION = 300;

@Component({
  selector: 'wbg-side-navigation',
  templateUrl: './side-navigation.component.html',
  styleUrls: ['./side-navigation.component.scss'],
  animations: [
    trigger('collapse', [
      state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
      state('true', style({ height: '0', visibility: 'hidden' })),
      transition('false => true', animate(DEFAULT_DURATION + 'ms ease-in')),
      transition('true => false', animate(DEFAULT_DURATION + 'ms ease-out'))
    ])
  ]
})
export class SideNavigationComponent implements OnInit {
  constructor(
    private readonly subProductService: SubProductService,
    // private readonly route: ActivatedRoute
    ) {}

  subProducts;
  // public isSubProductDetailPage: boolean;

  ngOnInit(): void {
    this.fetchAllSubProducts();

    // if (this.route.snapshot.params.id) {
    //   this.isSubProductDetailPage = true;
    // }
  }

  private fetchAllSubProducts(): void {
    this.subProductService.getAllSubProducts().subscribe(
      (response: any[]) => {
        this.subProducts = response;
        console.log(this.subProducts);
      },
      (_) => {
        console.log('error');
      }
    );
  }

  collapsed = false;

  toggle() {
    this.collapsed = !this.collapsed;
  }

  expand() {
    this.collapsed = false;
  }

  collapse() {
    this.collapsed = true;
  }
}

注释掉的代码我试图创建一个快照，让程序知道我在哪条路线上并执行 *ngIf 以显示基于 var Subproductdetail 页面（即 Subproductdetailpage 与 Subproductpage）的某些代码，但我无法得到那个去工作。

期待您的回复。

克恩科珀

4

0 回答 0