title: Reload app component on change in shared component
body: <p>I have a main menu in my app.component.ts, and I have added a language selector shared component which works fine in all the components that use my shared module.  But now I want to localise my main menu. Since app.component does not include the shared module, when I change the language in my language selector it is not reflected in the menu.  I thought that I can put the selected language into local storage and in the app component constructor I could assign the translations to different variables and use those in the front end.  But I do not know how to trigger the app component constructor in my shared component, or if I should use that approach.  </p>
  
  <p>Here are the relevant parts of my app component :</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'main-app',
      template: `
      &lt;div&gt;
          &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarHeaderCollapse"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="navbar-collapse collapse" id="navbarHeaderCollapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;&lt;a [routerLink]="['/Home']" data-toggle="collapse" data-target=".navbar-collapse"&gt;{{home}}&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container body-content" style="margin-top:80px;"&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      `
  })
  
  export class AppComponent {
      home: string;
  
      constructor() {
          var selectedLang = JSON.parse(localStorage.getItem('selectedLang'));
  
          if (selectedLang === null) {
  
              this.home = "Home";
          }
          else {
              if (selectedLang.lang === 'fi')
              {
                  this.home = "Koti";
              }
              else {
                  this.home = "Home";
              }
          }
      }
  }
  </code></pre>
  
  <p>And here are the relevant parts of my shared component :</p>
  
  <pre><code>   import { Component } from '@angular/core';
  import { TranslateService } from 'ng2-translate';
  
  @Component({
      selector: 'language-selector',
      templateUrl: '../app/shared/components/language-selector.component.html'
  })
  
  export class LanguageSelectorComponent {
  
      languageSelectorClicked(lang: string): void {
          localStorage.setItem('selectedLang', JSON.stringify({ lang: lang }));
          this.translate.currentLang = lang;
          this.translate.use(lang);
      }
  
      constructor(public translate: TranslateService) {
      }
  }
  </code></pre>
  
  <p>Can anybody help with this, or suggest a better approach?</p>