Question

我想知道为什么Angular2 Router正在返回Observables，迫使我们订阅而不是只返回一个数组......

例如：

  // private router: ActivatedRoute
 this.router.params.subscribe(params => {
      this.router.queryParams.subscribe((queryParams) => { 
         this.router.url.subscribe((url) => { 
            // all logic code needs to be here after so many callbacks.....
          });
      });
 });

Answer 1

这是因为observable可以多次发出参数。例如，假设您在/page/:pageNumber

的路线上进行了此设置

ngOnInit(){
    this.router.params.subscribe((params: {pageNumber: string}) => {
        // this callback is fired every time the parameters change
        this.pageNumber = params.pageNumber;
    });
}

然后加载/page/1。 ngOnInit仅在组件加载时运行一次，您将获得参数pageNumber = 1。现在说你导航到/page/2。您仍在使用相同的组件，因此ngOnInit不会再次触发，但是params observable会检测到更改并再次触发回调。这允许您获取更新的参数pageNumber = 2

正如Sasxa所说，你可以使用routerSnapshot获取一次参数。

ngOnInit(){
    this.pageNumber = this.router.snapshot.params.pageNumber;
}

但现在你失去了上述功能。当您从/page/1导航到/page/2时，ngOnit不会再次触发，因此您的pageNumber媒体资源不会更新为2。这一切都取决于你需要如何使用这些参数。

Answer 2

您还可以从RouterStateSnapshot

获取ActivatedRoute

let activated = this.router.routerState.shapshot.root;

while (activated.firstChild) {
   activated = activated.firstChild;
}

const { url, params, queryParams } = activated;

Answer 3

因为有些情况下可能会重复使用组件，这意味着您的路线会发生变化，但如果您有onInit中的静态数组或类似的东西，则无法获取更改。为此，由于组件实例保持活动状态，因此需要一种方法来更改路由参数。这就是Observable的用途。

REF： https://angular.io/guide/router#observable-parammap-and-component-reuse

为什么Angular2 Router返回Observable

3 个答案: