Question

我无法从路由中获取参数，因此需要先在组件内调用一个函数，然后再调用服务。

我已将其添加到构造函数中，因为我相信如果它位于NgInit中，它可能不会及时传递，但仍然没有运气。

我添加了一个console.log，它只是打印null，我可以看到它正在调用函数但没有传递参数。

我确定它是超基本的，我只是在某个地方犯了一个错误。

app.module.ts

const appRoutes: Routes = [
  { path: '', component: AppComponent},
  { path: 'tap/:tapcode', component: AppComponent}
];

app.component.ts

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private dataService: DataService) {

    this.tapCode = this.route.snapshot.paramMap.get('tapcode');
    console.log(this.tapCode);
    this.getScreen(this.tapCode);
  }

Answer 1

您可以尝试在 ngOnInit 内部获得激活的路由快照吗？

ngOnInit(){

this.tapCode = this.route.snapshot.paramMap.get('tapcode');

    }

或者您可以像这样订阅路线；

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.tapCode = this.route.snapshot.paramMap.get('tapcode');
  })
}

这是一个有效的示例：https://stackblitz.com/edit/angular-far56b

Answer 2

现在仅更改app.component.ts

 constructor(
private route: ActivatedRoute,
private router: Router,
private dataService: DataService) {

this.route.paramMap.subscribe((param=>{ this.tapCode=param.get('tapcode')
}));     
console.log(this.tapCode);
this.getScreen(this.tapCode);}

Answer 3

您可以直接在params.tapCode中获取路由参数。

constructor(
    private route: ActivatedRoute,
    private router: Router,
    private dataService: DataService) {

   // this.tapCode = this.route.snapshot.paramMap.get('tapcode');

    this.tapCode = this.route.snapshot.params.tapcode; //try this
    console.log(this.tapCode);
    this.getScreen(this.tapCode);
  }

参考： https://angular.io/api/router/ActivatedRouteSnapshot

Answer 4

问题在于数据不是在ActivatedRoute中可用，而是仅在ActivationEnd中可用，因为它是在地址栏中手动键入的。

  constructor(
    private router: Router,
    private dataService: DataService) {

      this.router.events.pipe( filter(event=> event instanceof ActivationEnd && event.snapshot.children.length == 0))
      .subscribe((event: ActivationEnd) => {
        console.log(event.snapshot.params);
      });
      }

参数未在ActivatedRoute中重新调整

4 个答案: