優雅的方式來訪問角落中與路由器鏈接相關的標題

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>