Angular 在共享组件发生更改时重新加载应用程序组件

我在app.component.ts中有一个主菜单，并且我添加了一个语言选择器共享组件，它在使用我的共享模块的所有组件中都能正常工作。但现在我想本地化我的主菜单。由于app.component不包含共享模块，因此当我在语言选择器中更改语言时，它不会反映在菜单中。我认为我可以将所选语言放入本地存储，在应用组件构造函数中，我可以将翻译分配给不同的变量，并在前端使用这些变量。但我不知道如何在共享组件中触发应用程序组件构造函数，或者我是否应该使用这种方法

以下是我的应用程序组件的相关部分：

import { Component } from '@angular/core';

@Component({
    selector: 'main-app',
    template: `
    <div>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarHeaderCollapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse" id="navbarHeaderCollapse">
                    <ul class="nav navbar-nav">
                        <li><a [routerLink]="['/Home']" data-toggle="collapse" data-target=".navbar-collapse">{{home}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content" style="margin-top:80px;">
            <router-outlet></router-outlet>
        </div>
    </div>
    `
})

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";
            }
        }
    }
}

   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) {
    }
}

---

有人能帮上忙吗，或者建议一种更好的方法吗？

您根本无法触发组件构造函数，尤其是AppComponent中的构造函数。只有在创建新实例时，Angulars DI才会调用它们

---

您可以将代码从构造函数中移到另一个方法中，并在构造函数中调用此方法，以及使用您认为合适的其他方法。例如，订阅共享服务的可观察对象。

您根本无法触发组件构造函数，尤其是来自AppComponent的组件构造函数。只有在创建新实例时，Angulars DI才会调用它们

您可以将代码从构造函数中移到另一个方法中，并在构造函数中调用此方法，以及使用您认为合适的其他方法。例如，对共享服务的可观察对象的订阅