How RouterLink and RouterLinkActive work?
up vote
0
down vote
favorite
Consider the following example:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
The active-link CSS class will be added to the a tag when the current URL is either "/user" or "/user/bob",
How could I enforce an exact match?
angular angular2-routing
asked Jan 25 '17 at 23:50
Fernando Costa
347315
add a comment |
up vote
0
down vote
favorite
Consider the following example:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
The active-link CSS class will be added to the a tag when the current URL is either "/user" or "/user/bob",
How could I enforce an exact match?
angular angular2-routing
asked Jan 25 '17 at 23:50
Fernando Costa
347315
What do you want to make it work?
– Roman C
Jan 25 '17 at 23:58
I want to apply the css when the active route is a child route.
– Fernando Costa
Jan 26 '17 at 0:02
If you apply the active route on the child component the parent component doesn't change.
– Roman C
Jan 26 '17 at 13:26
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Consider the following example:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
The active-link CSS class will be added to the a tag when the current URL is either "/user" or "/user/bob",
How could I enforce an exact match?
angular angular2-routing
asked Jan 25 '17 at 23:50
Fernando Costa
347315
Consider the following example:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
The active-link CSS class will be added to the a tag when the current URL is either "/user" or "/user/bob",
How could I enforce an exact match?
angular angular2-routing
angular angular2-routing
asked Jan 25 '17 at 23:50
Fernando Costa
347315
asked Jan 25 '17 at 23:50
Fernando Costa
347315
edited Nov 10 at 14:41
asked Jan 25 '17 at 23:50
Fernando Costa
347315
asked Jan 25 '17 at 23:50
Fernando Costa
347315
asked Jan 25 '17 at 23:50
Fernando Costa
347315
347315
What do you want to make it work?
– Roman C
Jan 25 '17 at 23:58
I want to apply the css when the active route is a child route.
– Fernando Costa
Jan 26 '17 at 0:02
If you apply the active route on the child component the parent component doesn't change.
– Roman C
Jan 26 '17 at 13:26
add a comment |
What do you want to make it work?
– Roman C
Jan 25 '17 at 23:58
I want to apply the css when the active route is a child route.
– Fernando Costa
Jan 26 '17 at 0:02
If you apply the active route on the child component the parent component doesn't change.
– Roman C
Jan 26 '17 at 13:26
What do you want to make it work?
– Roman C
Jan 25 '17 at 23:58
What do you want to make it work?
– Roman C
Jan 25 '17 at 23:58
I want to apply the css when the active route is a child route.
– Fernando Costa
Jan 26 '17 at 0:02
I want to apply the css when the active route is a child route.
– Fernando Costa
Jan 26 '17 at 0:02
If you apply the active route on the child component the parent component doesn't change.
– Roman C
Jan 26 '17 at 13:26
If you apply the active route on the child component the parent component doesn't change.
– Roman C
Jan 26 '17 at 13:26
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
If you want to full match the url. You can add the routerLinkActiveOptions.
e.g.
<a [routerLink]="/user" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Bob</a>
Then only when the url is '/user' will add class. The '/user/bob' will not.
edited Jan 2 at 5:44
Bartando
104219
answered Jan 26 '17 at 0:48
Lon Yang
506211
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41863797%2fhow-routerlink-and-routerlinkactive-work%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
If you want to full match the url. You can add the routerLinkActiveOptions.
e.g.
<a [routerLink]="/user" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Bob</a>
Then only when the url is '/user' will add class. The '/user/bob' will not.
edited Jan 2 at 5:44
Bartando
104219
answered Jan 26 '17 at 0:48
Lon Yang
506211
add a comment |
up vote
2
down vote
accepted
If you want to full match the url. You can add the routerLinkActiveOptions.
e.g.
<a [routerLink]="/user" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Bob</a>
Then only when the url is '/user' will add class. The '/user/bob' will not.
edited Jan 2 at 5:44
Bartando
104219
answered Jan 26 '17 at 0:48
Lon Yang
506211
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
If you want to full match the url. You can add the routerLinkActiveOptions.
e.g.
<a [routerLink]="/user" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Bob</a>
Then only when the url is '/user' will add class. The '/user/bob' will not.
edited Jan 2 at 5:44
Bartando
104219
answered Jan 26 '17 at 0:48
Lon Yang
506211
If you want to full match the url. You can add the routerLinkActiveOptions.
e.g.
<a [routerLink]="/user" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Bob</a>
Then only when the url is '/user' will add class. The '/user/bob' will not.
edited Jan 2 at 5:44
Bartando
104219
answered Jan 26 '17 at 0:48
Lon Yang
506211
edited Jan 2 at 5:44
Bartando
104219
edited Jan 2 at 5:44
Bartando
104219
edited Jan 2 at 5:44
Bartando
104219
104219
answered Jan 26 '17 at 0:48
Lon Yang
506211
answered Jan 26 '17 at 0:48
Lon Yang
506211
answered Jan 26 '17 at 0:48
Lon Yang
506211
506211
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41863797%2fhow-routerlink-and-routerlinkactive-work%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What do you want to make it work?
– Roman C
Jan 25 '17 at 23:58
I want to apply the css when the active route is a child route.
– Fernando Costa
Jan 26 '17 at 0:02
If you apply the active route on the child component the parent component doesn't change.
– Roman C
Jan 26 '17 at 13:26