参数未在 ActivatedRoute 中重新调整

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

问题是数据在 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);
      });
      }

Answer 2

你能尝试像这样在 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 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

现在只在 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);}