title: Angular 13 router: Combining path parameters, query parameters and fragment into a single observable that updates only once per navigation event
body: <p>In Angular 13 I have a route that evaluates query parameters, path parameters and the fragment.
  Whenever a navigation to the route happens during which any number of the parameters changes, I want to handle all changes in one singe event.</p>
  <p>Currently the component registered for the route combines the parameters into a single observable using <code>combineLatest</code>:</p>
  <pre><code>ngOnInit(): void {
      combineLatest([
        this.route.params, 
        this.route.queryParams, 
        this.route.fragment
      ])
      .pipe(map(p =&gt; {
        return { 
          id:         p[0]['id'],       // path parameter 'id'
          filter:     p[1]['filter'],   // query parameter 'filter'
          section:    p[2]              // fragment
        };
      }))
      .subscribe(p =&gt; {
        // handle parameter update
        // fetch data from backend
      });
    }
  </code></pre>
  <p>When navigating from route (id = 1, section = undefined) to route (id = 2, section = 1) using the <code>routerLink</code> directive, the code in the subscription is executed twice - first time for the change in the fragment (id = 1, section = undefined) --&gt; (id = 1, section = 1) and a second time for the change of the id (id = 1, section = 1) --&gt; (id = 2, section = 1).</p>