<p dir="auto"><em>From <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/DanWahlin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/DanWahlin">@DanWahlin</a> on June 18, 2016 4:39</em></p>
<p dir="auto">I know the API is still being worked on at this point, but I wanted to add my two cents on route parameter access and the APIs after working with them quite a bit lately. Simplifying the overall process could really be helpful. Here's one scenario I'm running into a lot involving parent route parameters that feels much too verbose currently:</p>
<p dir="auto"><strong>Route:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/customer/2/details"><pre class="notranslate"><code class="notranslate">/customer/2/details
</code></pre></div>
<p dir="auto"><strong>Snapshot API to Get id Route Parameter:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const id = +this.router.routerState.parent(this.route).snapshot.params['id'];"><pre class="notranslate"><code class="notranslate">const id = +this.router.routerState.parent(this.route).snapshot.params['id'];
</code></pre></div>
<p dir="auto"><strong>Observable API to Get id Route Parameter:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="this.router.routerState.parent(this.route)
       .params 
       .subscribe(params =&gt; { 
           const id = +params['id'];
           //do something with id
          this.dataService.getCustomer(id)
                .subscribe((customer: ICustomer) =&gt; this.customer = customer);
       });
//With the code this way I think I'd have to unsubscribe too?"><pre class="notranslate"><code class="notranslate">this.router.routerState.parent(this.route)
       .params 
       .subscribe(params =&gt; { 
           const id = +params['id'];
           //do something with id
          this.dataService.getCustomer(id)
                .subscribe((customer: ICustomer) =&gt; this.customer = customer);
       });
//With the code this way I think I'd have to unsubscribe too?
</code></pre></div>
<p dir="auto"><strong>Suggested API</strong>:</p>
<p dir="auto">I know that ActivatedRoute doesn't currently have a parent property, but something like the following would really simplify this fairly common scenario (this uses a snapshot rather than an observable):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="//Move up to parent route and grab the id param
const id = +this.route.parent.params['id'];"><pre class="notranslate"><code class="notranslate">//Move up to parent route and grab the id param
const id = +this.route.parent.params['id'];
</code></pre></div>
<p dir="auto">Thanks for all the hard work on the router so far - really like the direction it's going. I just wanted to document a few ideas since the API is still being worked on and I think there are definitely some opportunities to simplify things along the way.</p>
<p dir="auto"><em>Copied from original issue: angular/vladivostok#81</em></p>
<p dir="auto"><strong>I'm submitting a feature request</strong></p>
<p dir="auto">I'm reporting this issue by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/DanWahlin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/DanWahlin">@DanWahlin</a> that I found in google cache from the old router repository that was deleted when you moved the router to the angular repository. The text is copy pasted from the old issue (<a href="https://github.com/angular/vladivostok/issues/81">https://github.com/angular/vladivostok/issues/81</a>):</p>
<p dir="auto"><em>start of copy paste</em></p>
<hr>
<p dir="auto">I know the API is still being worked on at this point, but I wanted to add my two cents on route parameter access and the APIs after working with them quite a bit lately. Simplifying the overall process could really be helpful. Here's one scenario I'm running into a lot involving parent route parameters that feels much too verbose currently:</p>
<p dir="auto"><strong>Route:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/customer/2/details"><pre class="notranslate"><code class="notranslate">/customer/2/details
</code></pre></div>
<p dir="auto">Snapshot API to Get id Route Parameter:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const id = +this.router.routerState.parent(this.route).snapshot.params['id'];"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">id</span> <span class="pl-c1">=</span> <span class="pl-c1">+</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-c1">routerState</span><span class="pl-kos">.</span><span class="pl-en">parent</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">route</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">snapshot</span><span class="pl-kos">.</span><span class="pl-c1">params</span><span class="pl-kos">[</span><span class="pl-s">'id'</span><span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Observable API to Get id Route Parameter:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.router.routerState.parent(this.route)
       .params 
       .subscribe(params =&gt; { 
           const id = +params['id'];
           //do something with id
          this.dataService.getCustomer(id)
                .subscribe((customer: ICustomer) =&gt; this.customer = customer);
       });
// With the code this way I think I'd have to unsubscribe too?"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-c1">routerState</span><span class="pl-kos">.</span><span class="pl-en">parent</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">route</span><span class="pl-kos">)</span>
       <span class="pl-kos">.</span><span class="pl-c1">params</span> 
       <span class="pl-kos">.</span><span class="pl-en">subscribe</span><span class="pl-kos">(</span><span class="pl-s1">params</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span> 
           <span class="pl-k">const</span> <span class="pl-s1">id</span> <span class="pl-c1">=</span> <span class="pl-c1">+</span><span class="pl-s1">params</span><span class="pl-kos">[</span><span class="pl-s">'id'</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
           <span class="pl-c">//do something with id</span>
          <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">dataService</span><span class="pl-kos">.</span><span class="pl-en">getCustomer</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span>
                <span class="pl-kos">.</span><span class="pl-en">subscribe</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">customer</span>: <span class="pl-smi">ICustomer</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">customer</span> <span class="pl-c1">=</span> <span class="pl-s1">customer</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
       <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// With the code this way I think I'd have to unsubscribe too?</span></pre></div>
<p dir="auto">Suggested API:</p>
<p dir="auto">I know that ActivatedRoute doesn't currently have a parent property, but something like the following would really simplify this fairly common scenario (this uses a snapshot rather than an observable):</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Move up to parent route and grab the id param
const id = +this.route.parent.params['id'];"><pre class="notranslate"><span class="pl-c">// Move up to parent route and grab the id param</span>
<span class="pl-k">const</span> <span class="pl-s1">id</span> <span class="pl-c1">=</span> <span class="pl-c1">+</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">route</span><span class="pl-kos">.</span><span class="pl-c1">parent</span><span class="pl-kos">.</span><span class="pl-c1">params</span><span class="pl-kos">[</span><span class="pl-s">'id'</span><span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Thanks for all the hard work on the router so far - really like the direction it's going. I just wanted to document a few ideas since the API is still being worked on and I think there are definitely some opportunities to simplify things along the way.</p>
<hr>
<p dir="auto"><em>end of copy paste</em></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
It's impossible to find out how to get parent parameters right now. The <code class="notranslate">parent</code> property of <code class="notranslate">routerState</code> is not documented. Without this issue I would never have found out how to do that (Thank you <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/DanWahlin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/DanWahlin">@DanWahlin</a> !!).<br>
This is such an obvious necessity that it should be simplified or at least documented.<br>
Thanks !</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.3</li>
</ul>