How to get id from the URL using snapshot or ActivatedRoute subscriber in Angular?

匆匆过客 提交于 2021-01-24 09:15:57

问题


I am getting value using snapshot method but it is getting the value after "classes" in this case 20 but I need 33 path like getting

credits/33/classes/20 only 20 or credits/33/classes/ only null("")

Update: I found a solution to my question.

Now it is getting id properly. The mistake is accessing to element in the right child component, didn't work in child's MatDialog component within the Snapshot version.

constructor(private route: ActivatedRoute) {} 
 ngOnInit(): void {
   console.log(parseInt(this.route.snapshot.paramMap.get('id1')));

If your url has 2 Id values, you can use snapshot of route.parent

   console.log(parseInt(this.route.parent.snapshot.paramMap.get('id1')));
}

回答1:


your path in routing module will be

const appRoutes: Routes = [
{ path: 'credits/:id1/classes/:id2', component: YourComponent }];

suppose id1 is 33 and id2 is 20

the code will be: use ActivatedRoute instead of ActivatedRouteSnapshot

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {

ngOnInit() {
this.route.params
      .subscribe(
        (params: Params) => {
          this.id1 = +params['id1'];
          this.id2 = +params['id2'];
          console.log(id1 + '' + id2);
        }
      );
    }
}



回答2:


Create a route, in which will be routed to your component, and add it to your module.

const appRoutes: Routes = [
{ path: 'credits/:id1/classes/:id2', component: MyComponent },
{ path: 'credits/:id1', component: MyComponent }];

Then, you can use ActivatedRoute to get your params.

 export class MyComponent implements {
  id1: string;
  id2: string;

  constructor(private route: ActivatedRoute) { 
    this.id1 = this.route.snapshot.params['id1'];
    this.id2 = this.route.snapshot.params['id2'];
  }

}

StackBlitz here



来源:https://stackoverflow.com/questions/56271351/how-to-get-id-from-the-url-using-snapshot-or-activatedroute-subscriber-in-angula

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!