Menu
I have a form being filled in two steps, the first form fills in the main part of an object and the second, the sub-part. There is a method that navigates back from form2 to form1 that works on Chrome and Firefox, but with Microsoft Edge it seems to add "/?object", and it's something that I'm not doing in code.
my button to go back from form2 to form1
<button class="btn btn-default pull-right" (click)="onCancel()">{{ 'button.back' | translate }}</button>
my method onCancel()
onCancel() {
this.goal.target = this.target;
this.service.setGoalToSave(this.goal);
if (this.isEditing) {
this.router.navigate(['goals/goalForm', this.goal.goalId.toString()]);
} else {
this.router.navigate(['goals/goalForm']);
}
}
Microsoft Edge navigates to
http://localhost:8080/my-service/?target01=&target02=&target03=&target04=&target05=&target06=&target07=&target08=&target09=&target10=&target11=&target12=&annualTarget=
But that isn't a valid route, so it redirects to my main page.
Anyone knows what is causing this or how can I fix it?
667
To access the route parameters, we use route. snapshot , which is the ActivatedRouteSnapshot that contains information about the active route at that particular moment in time. The URL that matches the route provides the productId . Angular uses the productId to display the details for each unique product.
First, add links to the two components. Assign the anchor tag that you want to add the route to the routerLink attribute. Set the value of the attribute to the component to show when a user clicks on each link. Next, update your component template to include <router-outlet> .
Instead of “href” attribute of anchor tag, we use the “routerLink” attribute of Angular. The routerLink attribute allows us to link to a specific route of the Application.
Angular router traverses the URL tree and matches the URL segments against the paths configured in the router configuration. If a URL segment matches the path of a route, the route's child routes are matched against the remaining URL segments until all URL segments are matched.
Angular Route Params: How to Pass Route Params in Angular. To access route parameters and query parameters in Angular, use ActivatedRoute service. The ActivatedRoute service provides Observables through which we can subscribe to the values of route params and route query params. In Angular, we can pass the data as route parameters in two ways.
The ActivatedRoute is a service, which keeps track of the currently activated route associated with the loaded Component. The Angular adds the map all the route parameters in the ParamMap object, which can be accessed from the ActivatedRoute service The ParamMap makes it easier to work with parameters.
In Angular, we can pass the data as route parameters in two ways. Route params(Route parameters) Route queryParams(Route query parameters) If we want to pass values between views, then we can use route params. For example, if we’re going to pass an ID from one route to another and fetch the id on a component onInit(), then we can use route params.
Detect the change in URL route in NavigationStart’s subscribe method. We can add progress spinner or progress bar whenever a route change detected in Angular applications. Now we will go through an example to understand it further. I have created an Angular app which contains three routes. Aboutus,Services and Contactus.
To fix this problem, add type="button" to the button tag. Edge is apparently assuming that any button without an explicit type is type="submit", for which it is posting the values in the form.
I had explicitly included the form tag in my page so that I could access the form properties in the .ts code. I removed that form tag and associated code, and the navigation works in Edge. So Edge seems to be assuming that my button was a submit button. After including type="button" in the button attributes, I was able to put the form tag back in, and it all still worked.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
