Detailed explanation of the implementation steps of angular route highlighting

This time I will bring you angularroutingDetailed explanation of the implementation steps of highlighting, what are the notes of angular routing highlighting implementation, the following is a practical case, let’s take a look .

What is route highlighting? what is the benefit?

When you are working on a backend management system, there is a row of routes on the left Navigation. Click to enter different pages. Then the dom element where this route is located will add a style to indicate the current It's the location.

But when you refresh, you will find that this style is gone...

What should I do?

Use route highlighting: When the route is activated, you are allowed to add a class on the dom element where you add the route. This style will only be removed when the url changes.

The current route is activated or the current route is in the activated stateStateIndicates that the route in the url of the page and the route in the current dom tag want to match.

// 用法概览
@Directive({
  selector: '[routerLinkActive]',
  exportAs: 'routerLinkActive'
})
class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit {
 constructor(router: Router, element: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef)
 links: QueryList<RouterLink>
 linksWithHrefs: QueryList<RouterLinkWithHref>
 get isActive: boolean
 routerLinkActiveOptions: {...}
 set routerLinkActive: string[] | string
 ngAfterContentInit(): void
 ngOnChanges(changes: SimpleChanges): void
 ngOnDestroy(): void
}

Example

.red{
  color: red;
}

<a routerLink="/user/login" routerLinkActive="red">login</a>

When the url is user or /user/login, the a tag will be added with classred. When the url changes to something else, the class will be removed.

How to add two classes?

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>

Two ways to write routerLinkActive

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
<a routerLink="/user/login" [routerLinkActive]="['class1', 'class2']">login</a>

You can also configure parameters for routerLinkActive

Pass exact: true to indicate that the route completely matches It is highlighted, such as

Copy code The code is as follows:

<a routerLink="/user/login" routerLinkActive="red" [routerLinkActiveOptions]="{ exact: true}">login</a>

You can also use isActive to check whether the route is currently active

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive ? '激活' : '未激活'}}
</a>

If the current route is active, it will display: login activated

Inactive state

login Inactive

The above rla is the abbreviation of routerLinkActive, which can be defined at will.

Here comes the important point: You can use the RouterLinkActive directive on the parent element using the routerLink element

Is it troublesome to add styles to each route separately? Adding a route highlighting command to its parent element can solve the problem!

<p routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">
 <a routerLink="/user/login">login</a>
 <a routerLink="/user/reset">reset</a>
</p>

Just add routerLinkActive and routerLinkActiveOptions to the parent element p of the a tag. When the route is /user/login or /user/reset, the red style will be added to the dom element where it is located. What needs to be noted here is to add routerLinkActiveOptions to specify a complete match. Otherwise, when the url is user, both routes will be matched and the red style will be added.

More API usage is updated on github

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Angular5 routing value transfer method summary

JS makes folding and unfolding animation (with code)

The above is the detailed content of Detailed explanation of the implementation steps of angular route highlighting. For more information, please follow other related articles on the PHP Chinese website!