从同一页面上的两个组件访问路径参数

Question

我有一个组件（如下所示），它实现了对路由参数的相当教科书订阅。

export class tutorialComponent implements OnInit, OnDestroy {
  private sub: Subscription;
  public chapter: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.chapter = params['id'];
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

然而，在路线上：http://localhost:3000/tutorial/chapter/0如果我从浏览器运行ng.probe($0).componentInstance（选择了教程cmp），那么我可以看到 chapter = undefined - 为什么？

另外，如果我使用this.chapter = +params['id'];，那么 chapter = NaN ？

更新

我有两个组件，父组件（Tutorial）和子组件（Chapter）组件。两者都有相同的：

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.chapter = params['id'];
    });
  }

但是，子组件正确显示chapter？

Answer 1

根据文档建议的方法是使用route.snapshot：

   this.validationCode = route.snapshot.params['id'];

来自正在运行的应用...

Answer 2

您需要将params['id'];转换为如下数字：

this.chapter = +params['id'];