<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">canDeactivate guard is not called for child components when params change in parent route.</p>
<p dir="auto">Given that I have a general layout for a page if I have a user param, When I change the user while maintaining the subroute for the UserForm, canDeactivate is not called.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{ path: ':id', component: UserLayout,
    children: [ 
        { path: 'edit', component: UserForm, canDeactivate: [CanDeactivateUserForm] }
        { path: 'favorites', ... },
        { path: 'commments', ... } 
    ]
}"><pre class="notranslate"><code class="notranslate">{ path: ':id', component: UserLayout,
    children: [ 
        { path: 'edit', component: UserForm, canDeactivate: [CanDeactivateUserForm] }
        { path: 'favorites', ... },
        { path: 'commments', ... } 
    ]
}
</code></pre></div>
<p dir="auto">If I put the <code class="notranslate">canDeactivate</code> on the <code class="notranslate">:id</code> path, the method is called, however the <code class="notranslate">component</code> I receive as the first parameter in the <code class="notranslate">canDeactivate</code> method is not the <code class="notranslate">UserForm</code> component, but the <code class="notranslate">UserLayout</code>.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Expected behavior would be either to implement a <code class="notranslate">canDeactivateChild</code> similar to <code class="notranslate">canActivateChild</code> that is called on the subroutes if the parent route changes or have the children's <code class="notranslate">canDeactivate</code> calls trigger when a parent route changes.</p>
<p dir="auto">Another alternative would be to make its usage similar to the way it worked before RC.5, where <code class="notranslate">canDeactivate</code> can be directly implemented on the <code class="notranslate">UserForm</code> class.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto"><a href="https://plnkr.co/edit/zxFODbsGl8pL36K8CYUy?p=preview" rel="nofollow">Here is a minimal plunker demonstrating the issue</a>. When you navigate to the a user, the <code class="notranslate">EditInfo</code> form is currently the only subroute of <code class="notranslate">UserDetail</code> (for brevety), but you could imagine other routes. The <code class="notranslate">canDeactivate</code> is attached to this route but when you click on another user, we want to still maintain the editing page, however, <code class="notranslate">canDeactivate</code> is not called.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">So we can check with the user before navigating away from an unfinished form.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<p dir="auto">MacOS 10.10/Linux Ubuntu, VSCode, npm, rails server</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0</li>
<li><strong>Browser:</strong> all</li>
<li><strong>Language:</strong> all</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
There is already a canActivateChild guard. Having the symmetric guard is equally important. Not sure why this wasn't added at the same time. We have many scenarios where we need to protect child routes from navigating away if they have pending unsaved changes. That's currently only possible by putting a canDeactivate guard on each child route.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> Latest</li>
<li><strong>Browser:</strong> all</li>
<li><strong>Language:</strong> all</li>
</ul>