|
|
Posted on 10/25/2018 3:52:29 PM
|
|
|
Introduction to RouterLink Commands
The RouterLink command allows you to link to a specific part of your application. If the link is static, we can use the command in the following way:
If you need to generate link addresses with dynamic values, you can pass an array of path segments and then the parameters for each segment. For example, using an array of ['/team', teamId, 'user', userName, {details: true}] means that we want to generate a link to /team/11/user/bob; details=true 。
Multiple static segments can be merged into one, e.g. ['/team/11/user', userName, {details: true}].
The first path fragment can be defined as /, ./, or . / Beginning:
- If it starts with /, the route will start looking up from the root route
- If it starts with ./ or is not used, the route will start looking up from the child route that is currently active for the route
- If you start with : / begins, the route goes to the next level of lookup
You can set query parameters and fragments in the following ways:
The RouterLink command will generate the following link based on the input parameters set above: /user/bob#education?debug=true. In addition, we can declare how to handle query parameters via the queryParamsHandling property, the available options are:
- merge - Merge existing queryParams into the current queryParams
- preserve - Save the current queryParams
- default ('') - Use only query parameters
Specific usage examples are as follows:
RouterLink command explained in detail
RouterLink command definition
RouterLink command input property
Set the query parameters related to the URL
@Input() queryParams: {[k: string]: any};
Set the hash fragment on the URL
@Input() fragment: string;
Set the query parameter processing mode: merge, preserve, and default
@Input() queryParamsHandling: QueryParamsHandling;
Sets whether to keep fragments
@Input() preserveFragment: boolean;
When setting page navigation, whether to add new statuses to the history
@Input() skiplocatio{filter}nChange: boolean;
While setting the page navigation, whether to replace the current state in the history
@Input() replaceUrl: boolean;
Set commands parameter information, for example: ['/user/bob']
@Input()
set routerLink(commands: any[]|string) {
if (commands != null) {
this.commands = Array.isArray(commands) ? commands : [commands];
} else {
this.commands = [];
}
}
RouterLink command binding
Event binding
RouterLink class
@Attribute()
@Attribute('attributeName') decorator: Used to obtain the attribute value corresponding to the attributeName attribute name on the command host element.
tabindex
The tabindex property specifies the tab key control order of an element (when the tab key is used for navigation).
The following elements support tabindex attributes: <a>, <area>, <button>, <input><object><select> , , , and <textarea> .
tabindex syntax:
RouterLink class
RouterLink class
RouterLinkWithHref command
RouterLinkWithHref directive
RouterLinkWithHref directive input property
RouterLinkWithHref command
attribute binding
<a> Tags define hyperlinks that are used to link from one page to another. <a> There are two important attributes in tags:
href - specifies the URL address of the page the link leads to. If you do not use the href attribute, you cannot use the following attributes: download, media, rel, target, and type attributes.
target - specifies how the linked page opens in the browser window, and its parameter values are mainly as follows:
_blank - Load the target document in a new browser window.
_parent - This goal causes the document to load into the parent window or frame set containing the frame referenced by the hyperlink. If this reference is in a window or in a top-level framework, then it is equivalent to the target _self.
_self - The value of this target is the default target for all labels that do not specify a target <a> , which causes the target document to be loaded and displayed as the source document in the same frame or window. This target is redundant and unnecessary unless <base> used with the target attribute in the document title tab.
_top - This goal causes the document to load the window containing the hyperlink, and using the _top target will clear all included frames and load the document in the entire browser window.
Event binding
MouseEvent represents an event that occurs when a user interacts with a pointer device (such as a mouse), and common events include: click, dblclick, mouseup, and mousedown events. The MouseEvent object contains a button attribute that represents the mouse button pressed by the user, and the possible attribute values are as follows:
- 0 - The main button is pressed, usually referring to the left mouse button.
- 1 - The auxiliary button is pressed, usually referring to the mouse wheel.
- 2 - The second key is pressed, usually referring to the right mouse button.
- 3 - The fourth button is pressed, usually referring to the browser back button.
- 4 - The fifth button is pressed, usually referring to the browser's forward button.
For a mouse configured for left-handed use, the keystrokes will be the opposite. In this case, the value is read from right to left. In the example code above, we also access the ctrlKey and metaKey properties of the MouseEvent object, which contain the altKey and shiftKey properties in addition to these two properties. These attributes are described below:
- MouseEvent.ctrlKey - returns true if the control key is pressed when the mouse event is triggered.
- MouseEvent.metaKey - returns true if the (Window - ⊞, Mac - ⌘ Command) key is pressed when the mouse event is triggered.
- MouseEvent.altKey - Returns true when the mouse event is triggered if the (Window - alt, Mac - Option, or ⌥ ) key is pressed.
- MouseEvent.shiftKey - Returns true if the shift key is pressed when a mouse event is triggered.
If you press ctrlKey and then click the tab, a <a> new tab page will be created using the current URL address. If you press metaKey and then click on the <a> tab, the current page will be refreshed. Therefore, in the onClick() method, the corresponding judgment is performed.
RouterLinkWithHref command lifecycle
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref class
RouterLinkWithHref class
RouterLinkWithHref class
Introduction to the RouterLinkActive command
The RouterLinkActive directive allows you to add CSS classes to an element when the linked route becomes active. Take a look at the following example:
When the URL address is /user or /user/bob, the active-link class will be added <a> to the tag. If the URL changes, the active-link class is automatically removed from the <a> tag. You can also add multiple classes at once, as follows:
When applying the routerLinkActive command, you can also use the routerLinkActiveOptions parameter to configure how URLs are matched, as follows:
When the {exact: true} parameter is configured, the active-link class is only added to the tag if the URL address matches exactly <a> . You can also assign a RouterLinkActive instance to a template variable and check the isActive status of the command directives directively:
Finally, you can also apply the RouterLinkActive command to the parent element of the RouterLink. Examples include:
In the example above, when the URL is addressed as /user/jim or /user/bob, the active-link class is added <div> to the corresponding element.
RouterLinkActive command explained in detail
RouterLinkActive command definition
RouterLinkActive command input property
RouterLinkActive command lifecycle
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive class
RouterLinkActive class
RouterLinkActive class
|
Previous:There is a function here that is really good, you can make money, it is promotion.Next:Released a DZ online payment contract-free plugin, which is available for personal testing.
|
