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

问题描述

我想在当前文本页面标题所在的位置显示当前选择的链接标题，并想知道是否有一种优雅的方式来做到这一点.

import { Component } from '@angular/core';@成分({模板:`<div class="container"><div class="子导航"><h1>页面标题</h1><导航><ul><li *ngFor="let 设置菜单项"><a [routerLink]="item.link"routerLinkActive="路由器链接活动"#rla="routerLinkActive"href=""><i ngClass="{{item.style}}" aria-hidden="true"></i>{{item.caption}} {{ rla.isActive ?'*' : ''}}</a></li></nav>

<路由器插座></路由器插座></div>`,})导出类 SettingsComponent {设置菜单 = [//{caption:"Clients", link:['clients']},{ 标题:位置摘要"，链接:['位置'] }，{标题:机场"，链接:['机场'] }，{标题:首选航空公司"，链接:['机场'] }];}

解决方案

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

我有一个服务，它有 leftNavItems 和 selectedNavItem.

@Injectable()导出类 WebUiService {leftNavItems: NavItem[] = [];selectedNavItem: NavItem = { id: -1, iconClass: '', title: '', displayName: '', routeUrl: '', primePermissionId: 0 };leftNavTo(itemId: number) {this.selectedNavItem = $.grep(this.leftNavItems, function (a) {返回 a.id === itemId;})[0];}}导出类 NavItem {身份证号码;图标类:字符串；标题:字符串；显示名称:字符串；routeUrl:字符串；primePermissionId:数字；}

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

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

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

 
<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>

在主布局中，注入 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}}

<路由器插座></路由器插座>

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.

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;
}

In actual route component, inject WebUiSerivce:

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

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>

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屋！