为什么 Angular2 Router 返回 Observable

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

您还可以从 RouterStateSnapshot

获得 ActivatedRoute

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

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

const { url, params, queryParams } = activated;

Answer 2

这是因为可观察对象可以多次发出参数。例如，假设您在 /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 3

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

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

为什么 Angular2 Router 返回 Observable

Why is Angular2 Router returning Observable

angular-routing

angular