Question

在我们的应用程序中，我使用翻译管道并将所选语言存储在StorageProvider（localstorage）中

当我们更改子页面中的值时，我的问题是离子菜单（在app.html，app.component上）无法转换为所选语言。我的app.html代码如下：

app.html

    <ion-menu [content]="content">       
      <ion-content class="smrt-dark">
        <ion-list>
          <button  color="dark" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" style="height: 150%" [hidden]="!isAuthenticate(p.isAccess)">
            <i class="fa fa-{{p.icon}} {{p.color}} circle-i-mn smrt-{{p.color}}" aria-hidden="true" item-start></i>
            {{p.title}}
          </button>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app.component.ts

export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = LoginPage;
  pages: Array<{ title: string, component: any, icon: string, color: string, isAccess: string }>;
  LANGUAGE;
  constructor(...) {
    console.log('main');
    if ( this.db._config.LANGUAGE === null){
      this.storage.get('language'). then( (data) => {
        this.LANGUAGE = data;
        this.translateService.use(this.db._config.LANGUAGE);

        // used for an example of ngFor and navigation
        this.pages = [
          {title: translateService.instant('home'), component: HomePage, icon: 'home', color: '', isAccess: 'HOME_LIST'},
          {title: translateService.instant('notes'), component: ListNotePage, icon: 'book', color: 'note', isAccess: 'NOTE_LIST'},
          {title: translateService.instant('tasks'), component: ListTaskPage, icon: 'check', color: 'task',  isAccess: 'ISSUE_LIST'}
        ];
      });
    }
    this.initializeApp();
  }

  isAuthenticate(key: string){
    return this.auth.isAuthenticate(key);
  }


  initializeApp()
  {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });

  }

如果有任何可用的方法来访问app.component.ts属性，我也可以接受此解决方案。

感谢您的解决方案。

Answer 1

您可以使用依赖注入将父组件实例注入其子组件，就像您可以注入任何其他类一样。你只需导入它：

import { AppComponent } from '../app.component';

然后在子组件的构造函数中：

constructor(private appComponent: AppComponent  ... //other stuff//){

然后，您将能够从子组件访问AppComponent中可用的任何公共属性和方法。

this.appComponent.appComponentMethod();

或

this.appComponent.appComponentProperty = someNewValue;

我经常对列表，制表符，卡片等组件执行此操作，其中父级正在创建N个几乎相同的子级。我将父实例注入每个子项，然后在父组件中创建一个方法，如：

children: ChildComponent[];

addChild( child : ChildComponent ) {
   this.children.push(child);
}

然后，在子组件中：

constructor( private parent: ParentComponent ) {}

ngOnInit() {
   this.parent.addChild(this);
}

这样，每个组件（父组件和子组件）都可以访问彼此的公共方法和属性。我通常会尝试尽可能地从父组件进行管理，并根据需要向下委派。

在更改子页面中的值后，我们如何从子页面访问app.component？

1 个答案: