title: One component redirecting while another component has a CanDeactivate guard on it
body: <p>The angular project I'm working on has a common component present on every page of the site. This component contains a dropdown when changed will redirect the user automatically to the homepage. So, even if you're 3 levels deep in terms of routing and working on something - if you change this common dropdown you're automatically taken to the homepage. The reason for this is that by changing the dropdown you're changing the context in which you're operating so it makes sense to switch everything back to the homepage for the new context.</p>
  <p>The problem is that a few child components (let's say Component A and B) have CanDeactivate guards on them so if you attempt to navigate away we display a modal that requires user input to confirm that they'll lose their changes.</p>
  <p>When you combine a user changing the context via the common component dropdown whilst they're mid way through a change in Component A, what happens is the modal warning appears and that Component A remains on the screen but the rest of the app changes context. So the resulting functionality is odd - the context changes but the user remains on Component A until they either save their changes or agree that losing them is ok.</p>
  <p>What I would have thought should happen is that the context dropdown component's attempt at redirecting should be halted until the can deactivate guard on the other component is completed or ignored. So basically in the above scenario the user changes the context, the warning modal appears and nothing else happens in the site until the user has actioned the modal.</p>
  <p>So - what I'm wondering is whether a canDeactivate guard should stop all components anywhere on the site from proceeding or just the component on which the guard is placed. If it's the latter then how can I 'promote' that guard so the entire site waits for the feedback from it before doing anything?</p>