下面是我的代码来获得每个标题:
export class WrapperComponent implements OnInit, OnDestroy {
DASHBOARD = 'Dashboard'
DASHBOARD_URL = 'dashboard'
PERSONAL_INFORMATION = 'Personal Information'
PERSONAL_INFORMATION_URL = 'personal-information'
EMPLOYEE_HISTORY = 'Employee History'
EMPLOYEE_HISTORY_URL = 'employee-history'
navBarTitle = this.DASHBOARD
subs: Subscription[] = [];
constructor(private router: Router) {}
ngOnInit(): void {
this.subToRouterEvents();
}
ngOnDestroy(): void {
if (0 === this.subs.length) {
return;
}
this.subs.forEach((sub) => sub.unsubscribe());
}
subToRouterEvents() {
const routeEventSub = this.router.events.subscribe(this.routerEventHandler);
this.subs.push(routeEventSub);
}
routerEventHandler = (event: Event) => {
if (event instanceof NavigationEnd) {
const routeText = this.router.url.split('/');
this.evalRouteUrl(routeText[3]);
}
};
evalRouteUrl(url: string) {
if ('undefined' === typeof url) return;
this.navBarTitle = url === this.DASHBOARD_URL ? this.DASHBOARD : this.PERSONAL_INFORMATION
}
}
这是我的html代码:
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
<li class="breadcrumb-item text-sm" *ngIf="navBarTitle === 'Personal Information'">
<a class="opacity-5 text-white">My Account</a>
</li>
<li
class="breadcrumb-item text-sm text-white active"
aria-current="page" *ngIf="navBarTitle === 'Personal Information'"
>
My Profile
</li>
<li
class="breadcrumb-item text-sm text-white active"
aria-current="page"
>
{{ navBarTitle }}
</li>
</ol>
<h6 class="font-weight-bolder text-white mb-0 text-uppercase">
{{ navBarTitle }}
</h6>
</nav>
任何人都可以帮助我得到导航栏的标题...我有这个代码,但它只需要2个选项。这将是一个很大的帮助我。
是否有可能扩展此代码,如有超过2个选项?
evalRouteUrl(url: string) {
if ('undefined' === typeof url) return;
this.navBarTitle = url === this.DASHBOARD_URL ? this.DASHBOARD : this.PERSONAL_INFORMATION
}
1条答案
按热度按时间pqwbnv8z1#
请不要使用图片来显示代码,否则请编写代码,选择所有并使用Ctrl+K来格式化它(很难阅读带有图片的问题)
你应该“参数化你的应用程序”,也就是使用一个对象数组
如果你有一个数组
可以通过路径在数组中查找并返回标题
顺便说一句:您可以使用新的属性(从Angular 15 -在以下版本中,您使用“数据”属性-)标题在您的路线,例如。