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

Question

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

我的问题是，当我们更改子页面中的值时，离子菜单（在 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);
}

这样，每个组件（父组件和子组件）都可以访问彼此的公共方法和属性。我一般会尽量从父组件管理，并根据需要向下委托。