SoFunction
Updated on 2025-04-05

A brief discussion on the best way to write routes and parameters to pass parameters in angular4.0

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

Otherwise, many '/' splicings can easily confuse parameters and component names.

Generally, the parameters passed on our page are in this format:

/api?uid=1&username=moon

However, in SPA single page applications, the following results are mostly the following [primary videos are perfunctory]

/api/1/moon

So how do I achieve the result?

The key point has begun.

Implement to jump from the product page to the product-detail page.

step1: Configure routing in.

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

step2: Write the jump in the script and pass the parameters.

constructor(
 private router: Router, //The Router module needs to be injected here){}
jumpHandle(){
 //This is the click jump event bound in html (['product-detail'], {
 queryParams: {
  productId: '1',
  title: 'moon'
 }
 });
}

step3: Get the passed parameters productId and title

constructor( 
 private activatedRoute: ActivatedRoute, //The ActivatedRoute module needs to be injected here) { 
 (queryParams => { 
 let productId = ; 
 let title = ; 
 }); 
} 

OK, it was solved perfectly like this.

The above article briefly talks about the best way to write routes and parameters in angular4.0 is all the content I share with you. I hope you can give you a reference and I hope you can support me more.