title: Angular2 change parent styles outside of component
body: <p>I'd like to change the styles of a component outside the scope of my current component. The markup in my app.component.html is as follows:</p>
  
  <pre><code>&lt;app-nav&gt;&lt;/app-nav&gt;
  &lt;div id='content-container'&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm looking to change the styles of a class <code>main-nav</code> in the app-nav component from the 'home-component' which is loaded from a route. I use <code>routerLink</code>'s in the nav and I've found if I add <code>encapsulation: ViewEncapsulation.None</code> to the <code>home.component.ts</code> I can alter the styles of the the class in the app-nav component however the changes are only applied once and if I go to other routes using the <code>routerLink</code>'s I cannot revert the changes (seems like the css is only loaded/applied once - when the component is initialized/comes into view)</p>