一种优雅的方式来访问与Angular中的路由器链接相关的标题 [英] Elegant way to access the caption associated with a router link in Angular

问题描述

我想显示当前选择的链接标题，该标题位于文本页面标题"当前所在的位置，并想知道是否有一种优雅的方法.

I'm wanting to display the currently selected link caption where the text Page Title currently is and wondered if there was an elegant way to do it.

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

@Component({
  template: `<div class="container">
  <div class="sub-navigation">
     <h1>Page Title </h1>
     <nav>
        <ul>
           <li *ngFor="let item of settingsMenu"><a [routerLink]="item.link"
            routerLinkActive="router-link-active"
            #rla="routerLinkActive"
            href=""><i ngClass="{{item.style}}" aria-hidden="true"></i> {{item.caption}} {{ rla.isActive ? '*' : ''}}</a></li>
        </ul>
      </nav>
          </div>
  <router-outlet></router-outlet></div>`,
})
export class SettingsComponent {
  settingsMenu = [
    // {caption:"Clients", link:['clients']},
    { caption: "Location Summary", link: ['locations'] },
    { caption: "Airports", link: ['airports'] },
    { caption: "Preferred Airlines", link: ['airports'] }
  ];
}

推荐答案

这就是我在应用程序中所做的.不知道这是否是一种优雅的方式.

That is what I did in my application. Not sure if it is an elegant way.

我有一项服务，该服务具有leftNavItems和selectedNavItem.

I have a service which has leftNavItems and selectedNavItem.

@Injectable()
export class WebUiService {
    leftNavItems: NavItem[] = [];
    selectedNavItem: NavItem = { id: -1, iconClass: '', title: '', displayName: '', routeUrl: '', primePermissionId: 0 };

    leftNavTo(itemId: number) {
        this.selectedNavItem = $.grep(this.leftNavItems, function (a) {
            return a.id === itemId;
        })[0];
    }
}

export class NavItem {
    id: number;
    iconClass: string;
    title: string;
    displayName: string;
    routeUrl: string;
    primePermissionId: number;
}

在实际的路由组件中，注入WebUiSerivce:

In actual route component, inject WebUiSerivce:

constructor(private webuiSvc: WebUiSerivce) {
    this.webuiSvc.leftNavTo(1);
}

在左侧菜单组件中，注入WebUiService:

In left menu component, inject WebUiService:

    <li *ngFor="let item of webuiSvc.leftNavItems" [class.active]="item == webuiSvc.selectedNavItem">
        <a [routerLink]="[item.routeUrl]" title="{{item.title}}">
            <i class="fa {{item.iconClass}}"></i> 
            <span class="nav-label">{{item.displayName}}</span>
            <span class="label label-primary pull-right" style="background-color:#3279b7">NEW</span>
        </a>
    </li>

在主布局中，注入WebUiService:

In master layout, inject WebUiService:

    <div style="font-size:28px; font-weight:bold; float:left;padding:9px 0px 0px 30px; color:#fff;">
        <i class="fa {{webuiSvc.selectedNavItem?.iconClass}}"></i> {{webuiSvc.selectedNavItem?.title}}
    </div>

    <router-outlet></router-outlet>

这篇关于一种优雅的方式来访问与Angular中的路由器链接相关的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！