Learn Angular: Angular Navigation Parameters
Want to learn Angular? In this video, "Learn Angular: Angular Navigation Parameters", we learn how to we can start passing navigation parameters in an Angular 9 application.
The first step is to pass the navigation parameters during navigation.
Start by defining a route that will accept a parameter. This is done by specifying a "/:parameName" in the path of the route as shown below.
{ path: "product/:id", component: ProductDetailComponent }
Next, you pass the parameter by using the "routerLink" directive shown below.
[routerLink]="['/product', product.productId]"
In this case, we are binding the parameter value to the "product.productId" property of an object.
Step two is to read the parameter. Start by injecting the ActivatedRoute object into your component's constructor like show below:
constructor(private route: ActivatedRoute)
Now you have two options to read the parameters; Using the snapshot, or using an observable.
Using the Snapshot:
The snapshot property of the ActivatedRoute returns the initial value of the route. You can then access the paramsMap array to access the value of the parameter.
let id = this.route.snapshot.paramMap.get("id");
this.product = this.productService.getProduct(id);
Use the Snapshot option, if you only need the initial value.
Using an Observable:
We usually retrieve the value of a parameter in the ngOninit life cycle hook, when the component initialised. However, when the user navigates to a component again, Angular does not create the new component, but reuses the existing instance. In such circumstances, the ngOnInit method of the component is not called again. Hence you need a way to get the value of the new/updated parameter.
To do this, we will use an observable. By subscribing to the observable paramMap property, you will retrieve the latest value of the parameter and update the component accordingly.
this.sub = this.route.paramMap.subscribe(params =-- {
let id = params.get("id");
this.product = this.productService.getProduct(id);
})
}
Use this option if you expect the value of the parameter to change over time.
"Desktop to Web: A WPF Developers Guide to Learning Angular" is a video tutorial series that will help you take your WPF and WinForms desktop coding skill to the web with Angular. This series will help you understand how your current desktop skills map directly to concepts in Angular to make your learning path to the web as easy and painless as possible.
During each video in this series I will be giving away a one year subscription to Infragistics Ultimate valued at $1,995 USD. Simply subscribe to my channel, like the video, and leave a comment to be entered. Winners are announced in the next video in the series.
Official contest rules: https://brianlagunas.com/desktop-to-w...
The Prize: https://www.infragistics.com/products...
Follow Me:
Twitter: / brianlagunas
Twitch: / brianlagunas
Blog: http://brianlagunas.com
GitHub: https://github.com/brianlagunas
Sponsor Me:
https://github.com/sponsors/brianlagunas
Auf dieser Seite können Sie das Online-Video Learn Angular: Angular Navigation Parameters mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Brian Lagunas 13 März 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 4,807 Mal angesehen und es wurde von 100 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
