如何在Angular 7或更高版本中使用ActivatedRouteSnapshot或Subscriber从URL获取ID?

时间:2019-05-23 08:45:16

标签: angular angular-activatedroute angular7-router

我正在使用快照方法获取价值,但它是在“类”路径之后获取价值的,例如

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

更新: 我找到了解决问题的方法。

现在它可以正确获取ID。错误是在正确的子组件中访问元素,而在Snapshot版本中的子MatDialog组件中却无法使用。

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

2 个答案:

答案 0 :(得分:1)

您在路由模块中的路径将为

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

假设id1为33并且 id2是20

代码将是: 使用ActivatedRoute而不是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);
        }
      );
    }
}

答案 1 :(得分:0)

创建一条路由,该路由将被路由到您的组件,并将其添加到您的模块中。

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

然后,您可以使用ActivatedRoute来获取参数。

 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