Блог

Я хочу добавить путь навигации ко всем моим кнопкам в левом меню (которое не является главным меню).

Я получаю название пунктов меню как @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, чтобы она переходила к нужному пункту меню.

Если у вас есть доступ к elements массиву, который передается компоненту, вы можете значительно упростить задачу — вы просто добавляете целевой путь к каждому элементу, и вам MenuResourceComponent не придется иметь дело с какой-либо логикой, связанной с путем. Из ваших фрагментов я делаю вывод, что существует 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 константа, которую вы используете в своем шаблоне. У компонента нет такого свойства, поэтому это, вероятно, нарушает компиляцию.