Question

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

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

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

有人可以帮忙解决这个问题，还是建议更好的方法？

Answer 1

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

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

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

1 个答案: