The best way to obtain parameters by routing in angular4.0

This time I will bring you the best way to pass and obtain parameters in angular4.0routing. What are the precautions for passing and obtaining parameters in angular4.0 routing? The following are Let’s take a look at practical cases.

After studying the official website of ng4, I finally found the method I wanted. The result I want is to use '&' splicing parameters to send, which is the best for reading.

Otherwise, there are many ‘/’ splices, which can easily confuse parameters and component names.

Generally our page jump parameters are in this format:

http://angular.io/api?uid=1&username=moon

However, in SPA single-page applications, most of the results are as follows [Elementary videos are all so perfunctory]

http://angular.io/api/1/moon

So how do you achieve the results I mentioned?

The focus begins.

Realize jumping from product page to product-detail page.

step1: Configure routing in app-routing.module.ts.

const routes: Routes = [
{
 path: 'product',
 component: ProductComponent,
 },
 {
 path: 'product-detail',
 component: ProductDetailComponent,
 }
];

step2: Write jump in product.ts and pass parameters.

constructor(
 private router: Router, //这里需要注入Router模块
){}
jumpHandle(){
 //这是在html中绑定的click跳转事件
 this.router.navigate(['product-detail'], {
 queryParams: {
  productId: '1',
  title: 'moon'
 }
 });
}

step3: Obtain the passed parameters productId and title in product-detail.ts

constructor( 
 private activatedRoute: ActivatedRoute, //这里需要注入ActivatedRoute模块 
) { 
 activatedRoute.queryParams.subscribe(queryParams => { 
 let productId = queryParams.productId; 
 let title = queryParams.title; 
 }); 
}

ok, that’s the perfect solution.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use the on-change attribute in IView

How to use sass configuration in the vue project

The above is the detailed content of The best way to obtain parameters by routing in angular4.0. For more information, please follow other related articles on the PHP Chinese website!