如何将导航链接添加到 Angular 菜单上的不同按钮？答案

【问题标题】：How to add navigation link to different buttons on the menu in Angular?如何将导航链接添加到 Angular 菜单上的不同按钮？
【发布时间】：2021-10-20 23:17:27
【问题描述】：

我想为左侧菜单（不是主菜单）中的所有按钮添加导航路径。

我将菜单项名称设为@Input。我为所有项目名称及其导航路径创建了一个字典。

这是 HTML：

<div class="row-styles" id="elements" *ngFor="let item of elements">
    <button *ngIf="(item.action !== NO_ACCESS )" class="inner-children" routerLinkActive="active" id="inner-children" 
    [routerLink]="">
     <span>{{item.resource}}</span>   
    </button>
</div>

这是 TS 文件

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

@Component({
    selector: 'apm-menu-resource',
    templateUrl: './menu-resource.component.html',
    styleUrls: ['./menu-resource.component.less']
})
export class MenuResourceComponent implements OnInit {

    @Input() public elements = [];

    constructor() {
        const menupath = new Map<string, string>();

        menupath.set('General', '/Adigem/config/general');
        menupath.set('Messaging', '/Adigem/config/messaging');
        menupath.set('Server', '/Adigem/config/email/server');
        menupath.set('Alerting', '/Adigem/config/email/alert');
        menupath.set('Network', '/Adigem/config/network');
        menupath.set('Inventory', '/Adigem/config/inventory');
        menupath.set('External port', '/Adigem/config/snmp/external-port');
        menupath.set('Cloud Data', '/Adigem/config/clouddata');
        menupath.set('Performance', '/Adigem/config/Performance');
        menupath.set('CFG', '/Adigem/config/cfg');
        menupath.set('System', '/Adigem/config/system');

        console.log(menupath);
    }

    ngOnInit() {
        
    }
}

我想知道在 HTML 的路由器链接中添加什么，以便导航到正确的菜单项。

【问题讨论】：

你能分享你的元素数组吗

标签： javascript html angular typescript menu

【解决方案1】：

如果您有权访问 elements 数组，该数组将被传递给组件，您可以简化很多事情 - 您只需将目标路径添加到每个项目，您的 MenuResourceComponent 就不必处理与任何路径相关的逻辑。从你的 sn-ps 我推断有一个 resource 属性，这是元素的标题。如果是这样，elements 数组可以这样修改：

elements = [
  {resource:'General', path: '/Adigem/config/general'},
  {resource:'Messaging', path: '/Adigem/config/messaging'},
  ...
]

然后在模板中：

<div class="row-styles" id="elements" *ngFor="let item of elements">
  <button *ngIf="(item.action !== NO_ACCESS )" class="inner-children" 
   routerLinkActive="active" id="inner-children" 
   [routerLink]="item.path">
   <span>{{item.resource}}</span>   
  </button>
</div>

但是，如果您没有其他选择并且需要menupath 映射，那么您可以将其设为类字段：

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

@Component({
  selector: 'apm-menu-resource',
  templateUrl: './menu-resource.component.html',
  styleUrls: ['./menu-resource.component.less']
})
export class MenuResourceComponent{

  @Input() public elements = [];
  menupath = new Map<string, string>();

  constructor() {
    this.menupath.set('General', '/Adigem/config/general');
    this.menupath.set('Messaging', '/Adigem/config/messaging');
    this.menupath.set('Server', '/Adigem/config/email/server');
    this.menupath.set('Alerting', '/Adigem/config/email/alert');
    this.menupath.set('Network', '/Adigem/config/network');
    this.menupath.set('Inventory', '/Adigem/config/inventory');
    this.menupath.set('External port', '/Adigem/config/snmp/external-port');
    this.menupath.set('Cloud Data', '/Adigem/config/clouddata');
    this.menupath.set('Performance', '/Adigem/config/Performance');
    this.menupath.set('CFG', '/Adigem/config/cfg');
    this.menupath.set('System', '/Adigem/config/system');

    console.log(this.menupath);
  }
}

并且路由绑定看起来像： [routerLink]="menupath.get(item.resource)"

我不鼓励第二种解决方案，因为您将不得不处理收到物品的潜在情况，这对于您的menupath 地图是未知的。

我还担心您在模板中使用的NO_ACCESS 常量。组件没有这样的属性，所以这可能会破坏编译。

【讨论】：