Summary of angular+routerlink jump methods
This time I will bring you a summary of the angular routerlink jump method. What are the precautions in the angular routerlink jump method summary? The following is a practical case, let’s take a look.
Preface
In addition to using Router's navigate() method to switch routes, Angular2 also provides a command to Enhance a DOM object into a routing entry:
@View({
directives:[RouterOutlet,RouterLink]
template : `<nav>
<b router-link="video">video</b> |
<b router-link="music">music</b>
</nav>
<router-outlet></router-outlet>`
})RouterLink instruction adds click event monitoring to the host DOM object, and calls Router's navigate() method when triggered. routing.
However, this article mainly introduces the relevant content about Angular’s RouterLink fancy jump. It is shared for everyone’s reference and study. I won’t say much below, let’s take a look at the detailed introduction.
routerLink itself supports two writing methods:
<a routerLink="detail"> </a> <a [routerLink]="['detail']"> </a>
What are the writing methods for the value of routerLink, and what are the differences?
Assume that the current route is
`http://localhost:4200/#/doc/license`
Writing method 1: Absolute path / route name
<!--跳到 http://localhost:4200/#/doc/license --> <a [routerLink]="['/doc/demo']" >跳呀跳</a> <!--跳到 http://localhost:4200/#/demo --> <a [routerLink]="['/demo']" >跳呀跳</a>
Then the url is
http:/ Jump to /localhost:4200/#/doc/demo, that is, http://localhost:4200/#/ the absolute path you want to jump to.
Writing 2: A routing name routing name
<a [routerLink]="['demo']" >跳呀跳</a>
Then the url is http://localhost:4200/#/doc/license/(demo), that is, http ://localhost:4200/#/doc/license is the absolute path you want to jump to. At this time, it will add something to your route to become /(demo), and the jump will not work.
Writing method 3: relative path../route name
<a [routerLink]="['../demo']" >跳呀跳</a>
Then the url is
http://localhost:4200/#/doc/ demo, that is, http://localhost:4200/#/doc is the relative path you want to jump to. It will start looking at the previous level.
Writing method 4: ./route name, that is, the current route you write to jump to the route
<a [routerLink]="['./demo']" >跳呀跳</a>
Then the url is
http: //localhost:4200/#/doc/license/demo, that is, http://localhost:4200/#/doc/license is the relative path you want to jump to. It will look for this matching route and jump from the next level of the current route.
| 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:
jquery determines whether the element content exists
Nodejs Electron ubuntu installation steps detailed explanation
The above is the detailed content of Summary of angular+routerlink jump methods. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Summarize the usage of system() function in Linux system
Feb 23, 2024 pm 06:45 PM
Summary of the system() function under Linux In the Linux system, the system() function is a very commonly used function, which can be used to execute command line commands. This article will introduce the system() function in detail and provide some specific code examples. 1. Basic usage of the system() function. The declaration of the system() function is as follows: intsystem(constchar*command); where the command parameter is a character.
What are the methods of time processing in Go language?
Jun 10, 2023 pm 09:42 PM
As a modern programming language, Go language plays an important role in development. The Go language provides some built-in time functions and structures to make time processing more convenient. In this article, we will introduce some commonly used time processing methods in the Go language. time.Now() We can use the time.Now() function to get the current time: now:=time.Now()fmt.Println(now) output: 2019-06-131
How to remove unwanted URLs from Chrome's address bar?
Mar 08, 2024 am 09:19 AM
Chrome will automatically record the URLs that have been entered in the address bar, and will automatically "associate query content" in the future. But many times we don't need some URLs, how to delete them? The editor often encounters this problem. Addresses that have been entered before will be blocked in front of commonly used addresses, resulting in the need to select several times to enter the desired website. I have looked for how to delete it at least three times because... I forget it every time. In the address bar shortcuts of Chrome's official help Chrome keyboard shortcuts, the delete shortcut key is clarified: ▍Windows deletes the address bar association content. Press the down arrow key to highlight the corresponding content, and then press the Shift+Delete key ▍macOS deletes the address Bar association content click down
How to use shortcuts on iPhone
Nov 29, 2023 am 09:06 AM
These shortcuts can be used for a variety of different things on iPhone> In today's dynamic and fast-moving world, where the pursuit of efficiency and convenience takes center stage, the Shortcuts app on iPhone stands out as a very Powerful tool. It's designed to simplify and speed up daily tasks, significantly increasing productivity. This app is incredibly adaptable, enabling users to automate mundane, repetitive actions that consume precious time. Additionally, it provides tools to tailor personalized commands to individual needs and preferences. What's particularly noteworthy about the Shortcuts app is its integration with Apple's smart assistant, Siri. This feature allows the use of intuitive speech
How to delete win10 input method How to delete win10 input method Detailed introduction
Jul 07, 2023 pm 05:33 PM
The win10 input method has made great progress compared with previous system versions, and has many very useful functions. It is also very smooth to use overall and has the function of memory typing. However, some users already have their own input methods that are good to use. Now, if you want to delete the built-in win10 input method, how do you delete the win10 input method? Today I will tell you the details about how to delete the win10 input method. How to delete the input method in win10 1. Press [Win+i] to open the settings interface, and click on the "Time and Language" option. 2. Click "Region and Language" and click the "Options" button under "Chinese" on the right. 3. Click the "Microsoft Pinyin Alphabet" option and the "Delete" button will appear.
How to set restore point in win7
Jul 20, 2023 am 10:33 AM
The win7 system is Microsoft's traditional operating system and has many practical functions, such as the function of win7 system restore points. By setting a restore point in win7, you can restore the system to the restore point in win7 to achieve the purpose of system repair. How to set restore point in win? The following editor will teach you how to set a restore point in win7. How to set a restore point in win7 1. Find the desktop shortcut, right-click and select Properties. 2. After entering the property settings, select Advanced System Configuration. 3. Select the system maintenance option in the pop-up system properties box. 4. Click to create a restore point now for the controller with system protection turned on. 5. Add a description of the restore point, then click Create, wait patiently for a while, the restore point is successfully established, and then click Close. You can restore the system next time.
How to upgrade win7 system from xp system
Jul 13, 2023 am 08:53 AM
The xp system can be said to be a computer system that Microsoft released a long time ago. Currently, very few people are using it. The key is to use it on old computers. Many netizens want to upgrade the xp system to win7, but they don’t know how to upgrade the xp system to win7. .The actual operation steps will be demonstrated below. 1. Download and install the three-step software for beginners and open it. Select the win7 system and click to reinstall immediately. 2. Wait for the tool to automatically download the win7 system. 3. Reinstall the Windows system online immediately after downloading, please follow the prompts. 4. After the installation is completed, you can choose to restart immediately. 5. Enter the run menu bar and select the second item XiaoBaiPE-MSDNOnlineIns
What are the methods of type conversion in Go language?
Jun 11, 2023 am 09:05 AM
As the Go language becomes increasingly popular in the Internet industry, more and more developers are beginning to get involved in this language. In the Go language, type conversion is also one of the common programming operations. This article will introduce some common type conversion methods. Type assertion Type assertion is an operation that converts an interface type to another type. In Go language, type assertion can be made using the following syntax: value,ok:=interface{}.(type) where value represents the converted value, o
