https://angular.io/api/router/RouterLink gives a good overview of how to create links that will take the user to a different route in Angular4, however I can't find how to do the same thing programmatically rather needing the user to click a link
Max Koretskyi aka Wizard
54.9k2323 gold badges164164 silver badges285285 bronze badges
MichaelMichael
2 AnswersnavigateByUrlrouterLink directive as used like this:
is just a wrapper around imperative navigation using
router and its navigateByUrl method:
as can be seen from the sources:
So wherever you need to navigate a user to another route, just inject the
router and use navigateByUrl method:
navigate
There's another method on the router that you can use - navigate:
difference between the two
Using
router.navigateByUrl is similar to changing the location bar directlyâwe are providing the âwholeâ new URL. Whereas router.navigate creates a new URL by applying an array of passed-in commands, a patch, to the current URL.
To see the difference clearly, imagine that the current URL is
'/inbox/11/messages/22(popup:compose)' .
With this URL, calling
router.navigateByUrl('/inbox/33/messages/44') will result in '/inbox/33/messages/44' . But calling it with router.navigate(['/inbox/33/messages/44']) will result in '/inbox/33/messages/44(popup:compose)' .
Read more in the official docs.
Max Koretskyi aka WizardMax Koretskyi aka Wizard
54.9k2323 gold badges164164 silver badges285285 bronze badges
In addition to the provided answer, there are more details to
navigate . From the function's comments:
The Router Guide has more details on programmatic navigation.
SplaktarSplaktar
2,86511 gold badge2222 silver badges5656 bronze badges
Not the answer you're looking for? Browse other questions tagged angularroutesrouterlink or ask your own question.
there is an issue filed but it is listed as a feature request and i think it needs to be more of a priotity:
#12411
I'm submitting a .. (check one with 'x')
Dead space 3 mods. Current behavior
an angular app has a feature module that should be lazy loaded , a CanLoad guard needs to deal with the use case that the caller is not yet authenticated and needs to get a token before the guard can determine how the request will be handled. with a call to https://github.com/IdentityModel/oidc-client-js that uses https://github.com/IdentityModel/oidc-client-js a call to the STS server is used to return back to the angular app with a token. Can Load does not have the same access that Can Activate has to the router.navigate() data so the can load fails to get the user to the route.
Expected behavior
CanLoad should have the navigate route available in some reasonable form.
in CanActivate we can access the url and pass it to the STS server and the STS server passes that back to the angular app and everything works. CanLoad needs to be able to work in the same way, if the router data can not be the final url then we need some other 'state' object that we can get and a way to load that state back into the router when the STS server returns the user token to the app.
this STS server case happens with any third party auth like Google,Facebook,Microsoft or Twitter
Minimal reproduction of the problem with instructions
this needs several items to repro, i can't give a sample right now but the parts are this: https://github.com/IdentityModel/oidc-client-js
and an angular app that has a feature module that should not be loaded unless the user has a token that grants access to a view inside the feature module.
canLoad needs to make a call
this.mgr.signinRedirect({ data: state }) and the oidc manager 'mgr' returns to finish the callback and we then have code like this: this.mgr.signinRedirectCallback().then((user) => { // console.log('signed in', user); this.loggedIn = true; this.currentUser = user; this.userLoadededEvent.emit(user); // // if the login request was for a given view // we saved that before we redirected the user to the login page. // now we need to restore the view or route to the view // restore if they were already there, route to it if needed authentication to // get to that view // // console.log( ' user.state = ' , user.state ); if( user.state){ this.router.navigate([ user.state ]); }else{ this.router.navigate([']); } }).catch( (err) => { console.log(err); });
What is the motivation / use case for changing the behavior?
so that lazy loading of a feature module will work when using a third party authentication server via OIDC/ Oauth 2.
Please tell us about your environment:
WIndows Server 2012, IIS 8.5 but this issue will happen on any web server.
Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.
Navigatebyurl Angular 6 Is Broking FreeSign up
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking âSign up for GitHubâ, you agree to our terms of service and privacy statement. Weâll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Commentscommented Aug 20, 2017â¢
edited
commented Sep 1, 2017
commented Sep 11, 2017â¢
edited
added freq2: mediumseverity3: brokentype: bug/fix labels Dec 5, 2017bot added this to the Backlog milestone Jan 23, 2018bot modified the milestones: Backlog, needsTriageFeb 26, 2018commented Apr 19, 2018
commented Apr 30, 2018
commented May 2, 2018
referenced this issue Jun 1, 2018MergedKMCNG-1136 #683commented Nov 12, 2018â¢
edited
commented Nov 12, 2018
commented Nov 16, 2018
commented Jan 16, 2019
commented Feb 7, 2019â¢
edited
commented Feb 13, 2019
commented May 6, 2019
referenced this issue Jun 6, 2019Mergedfix(angular): pass navigation options to router when using NavController #18468
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment
Posted by1 year ago
Archived
TL;DR: Observables are confusing as hell (and I don't know if I should even be using them), my code is broken in the middle of the call trying to chain them together in my project, and I don't know what I'm doing. Please help.
I've been working on a MEAN project on the side, and right now I've been struggling with the Angular portion of it. I'm using Angular 5.2.x and Angular CLI 1.7.3. I've been searching for an answer to this for a while, and I've seen that many people here on this subreddit have also been having a hard time understanding how this works. I'll try to explain the problem as clearly as I can so that it makes sense on what is happening.
I'm trying to use good design principles while writing this project so that it will be easier to maintain. I'm attempting to use multiple services that I've written in TypeScript, but I'm getting the type error:
ERROR TypeError: Cannot read property 'subscribe' of undefined
In my Express.js project, I have all of my web api methods. These seem to work correctly, so I don't believe there is any problem there. On the Angular side, there are 3 levels or tiers in play. One is the actual component file, the other 2 are services that I'm working on. The hierarchy is:
Registration.component > Account.Service > Data.Service
What this means is I have my Registration component, which is the registration page for the project, which has an Account service that gets injected. The Account service has a Data service that gets injected. The Data service is responsible for making the http calls to the web api. I think part of my confusion is trying to use multiple observables at the same time, and I don't know what I'm doing wrong. Please excuse my code, as it's pretty messy right now.
Registration.component.ts
Account.service.ts
Data.service.ts
ApiResult.model.ts (for Reference on what it is)
I left in the code that I commented out, so you all can see what I was trying before. Hopefully I've explained the problem I'm having clearly. Also, this is the order of the console.logs as well:
2 comments
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |