在Angular中從一個選單切換到另一個選單-有解無憂

我有 2 個選單Administration和Market子選單。

在 Angular 中從一個選單切換到另一個選單

該Administration選單正常作業

如果我點擊Account Opening它就可以了！該頁面顯示鏈接

http://localhost:4200/administration/account-opening

在 Angular 中從一個選單切換到另一個選單

如果我點擊Portfolio它也可以！該頁面顯示鏈接

http://localhost:4200/administration/portfolio

在 Angular 中從一個選單切換到另一個選單

我的問題是，如果我從管理 url 中單擊Market，例如Value，我不會切換到 url http://localhost:4200/market/indice。

這是截圖......我還在網址上：

http://localhost:4200/administration/portfolio

在 Angular 中從一個選單切換到另一個選單

但是，如果手動更改 url

http://localhost:4200/administration/portfolio

在 Angular 中從一個選單切換到另一個選單

經過

http://localhost:4200/market/indice

該Indice頁面有效！

在 Angular 中從一個選單切換到另一個選單

我如何一鍵從“管理”和“市場”部分進行交流？？？？

我不希望用戶手動輸入 url 來導航網站，這會很乏味。

我認為問題出在dashboard.component.ts 上？也許路線不正確

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
})
export class DashboardComponent implements OnInit {
  selectedTab: string | undefined;

  showSubmenu: any[] = [];
  showInfo: any[] = [];

  menus: any[] = [
    /* Administration */
    {
      class: 'bx bx-lock-alt',
      item: 'Administration',
      route: 'administration',
      arrowDown: 'bx bx-chevron-down',
      arrowUp: 'bx bx-chevron-up',

      submenus: [
        {
          class: 'bx bx-key',
          item: 'Account Opening',
          route: 'account-opening',
        },
        {
          class: 'bx bx-wallet',
          item: 'Portfolio',
          route: 'portfolio',
        },
      ],
    },

    /* Market */
    {
      class: 'bx bx-chart',
      item: 'Market',
      route: 'market',
      arrowDown: 'bx bx-chevron-down',
      arrowUp: 'bx bx-chevron-up',

      submenus: [
        {
          class: 'bx bx-coin-stack',
          item: 'Value',
          route: 'value',
        },
        {
          class: 'bx bx-line-chart',
          item: 'Indice',
          route: 'indice',
        },
      ],
    },
  ];

  constructor() {}

  ngOnInit() {}

  toggleMenu(index: number) {
    this.showSubmenu[index] = !this.showSubmenu[index];
  }

  toggleSubmenu(event: MouseEvent, item: any) {
    event.stopPropagation();
    this.showInfo[item] = !this.showInfo[item];
  }
}

這是結構的一個想法

在 Angular 中從一個選單切換到另一個選單

如果您愿意，我可以通過此鏈接與您分享該專案？

https://stackblitz.com/edit/github-hkryrg?file=src/app/dashboard/dashboard.component.ts

非常感謝你的幫助！

uj5u.com熱心網友回復：

發生這種情況是因為您已將所有路線定義為親戚。

因此，當您在/localhost:4200/administration/account-opening并單擊市場時，它會嘗試導航到/localhost:4200/administration/market。您可以在控制臺拋出的錯誤中看到它。

Error: Cannot match any routes. URL Segment: 'administration/market'

為了在這種特定情況下解決它，您可以/在管理和市場路線中添加一個正斜杠，使它們成為絕對。

menus: any[] = [
    /* Administration */
    {
      ...
      route: '/administration',
      ...
    },

    /* Market */
    {
      ...
      route: '/market',
      ...
    },
  ];

干杯

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/399254.html

標籤：有角的

上一篇：從Angular的瀏覽器控制臺呼叫函式

下一篇：打字稿：反應形式patchValue不適用于私有屬性和getter/setter