[英]Make menu active in angular
In my application i have a header with menu items in it.在我的应用程序中,我有一个带有菜单项的 header。 i am retrieving the menu list from a service and displaying the same in the header. on hover of the main list i am displaying the sub menus.
我正在从服务中检索菜单列表,并在 header 中显示相同的内容。在主列表的 hover 上,我正在显示子菜单。 i want to make my parent item active when its child item is clicked and navigate to its page(child item can be at multiple levels).
我想在单击其子项并导航到其页面时使我的父项处于活动状态(子项可以处于多个级别)。 I want the user to be notified under which page they are in.
我希望用户在他们所在的页面下得到通知。
HTML HTML
<div class="collapse navbar-collapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown" *ngFor="let menu of menus"></li>
<a class="nav-link dropdown-toggle" href="#" id="{{ menu.label }}" data-toggle="dropdown"
aria-expanded="false">{{ menu.label }}</a>
<div *ngIf="menu.items.length > 0" class="dropdown-menu mt-0">
<span *ngFor="let item of menu.items | SortOptionsBy: 'label'">
<a routerLink="{{ item.url }}" *ngIf="!item.disabled" class="dropdown-item">
{{ item.label }}
</a>
<span *ngIf="item.items && item.items.length > 0">
<span *ngFor="let submenu of item.items | SortOptionsBy: 'label'">
<a href="{{ submenu.url }}" class="dropdown-item" target="_blank">
{{ submenu.label }}
</a>
</span>
</span>
</span>
</div>
</ul>
</div>
TS file文件
getMenus() {
this.subscription = this.navService.getMenuList().subscribe(data => {
this.menus = data;
});
}
Sample response示例响应
{
"data": [
{
"label": "Services",
"items": [
{
"label": "Lawn maintainance",
"url": "/home/lawn-maintainance"
},
{
"label": "Pool Cleaning",
"url": "/home/services/pool-cleaning"
}
]
},
{
"label": "Contact",
"items": [
{
"label": "Conatct Supplier",
"url": "/home/contact/contact-supplier"
},
{
"label": "Place Order",
"url": "/home/contact/place-order",
"items": [
{
"label": "email",
"url": "/home/contact/contact-supplier/email"
},
{
"label": "phone",
"url": "/home/contact/contact-supplier/phoe"
}
]
}
]
}
]
}
You can use routerLink您可以使用 routerLink
Use this directive to create a visual distinction for elements associated with an active route.使用此指令为与活动路由关联的元素创建视觉区别。 For example, the following code highlights the word "Bob" when the router activates the associated route:
例如,以下代码在路由器激活关联路由时突出显示单词“Bob”:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
Whenever the URL is either '/user' or '/user/bob', the "active-link" class is added to the anchor tag.每当 URL 是“/user”或“/user/bob”时,“活动链接”class 就会添加到锚标记中。 If the URL changes, the class is removed.
如果 URL 发生变化,则删除 class。
You can set more than one class using a space-separated string or an array.您可以使用空格分隔的字符串或数组设置多个 class。 For example:
例如:
<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>
To add the classes only when the URL matches the link exactly, add the option exact: true:要仅在 URL 与链接完全匹配时添加类,请添加选项 exact: true:
<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
true}">Bob</a>
To directly check the isActive status of the link, assign the RouterLinkActive instance to a template variable.要直接检查链接的 isActive 状态,请将 RouterLinkActive 实例分配给模板变量。 For example, the following checks the status without assigning any CSS classes:
例如,以下检查状态而不分配任何 CSS 类:
<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
Bob {{ rla.isActive ? '(already open)' : ''}}
</a>
You can apply the RouterLinkActive directive to an ancestor of linked elements.您可以将 RouterLinkActive 指令应用于链接元素的祖先。 For example, the following sets the active-link class on the parent tag when the URL is either '/user/jim' or '/user/bob'.
例如,当 URL 是 '/user/jim' 或 '/user/bob' 时,以下设置父标签上的活动链接 class。
<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
<a routerLink="/user/jim">Jim</a>
<a routerLink="/user/bob">Bob</a>
</div>
You can use ngClass.你可以使用 ngClass。
<div
[ngClass]="'active': condition === true"
>
</div>
this will assign the active class to your div upon a successful condition这将在成功条件下将活动的 class 分配给您的 div
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.