ルーラーリンクに関連付けられたキャプションにアクセスするためのエレガントな方法

Question

現在、テキストページタイトルが存在する場所で現在選択されているリンクキャプションを表示したいと思っています。

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

Answer 1

私は自分のアプリケーションで何をしたかであること。それがエレガントな方法であるかどうかは分かりません。

私はleftNavItemsと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注入：注入、左側のメニューコンポーネントで

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

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

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