![中访问与路由器链接相关联的标题的优雅方式]( "中访问与路由器链接相关联的标题的优雅方式")
本文介绍了在 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 中访问与路由器链接相关联的标题的优雅方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！