子ページの値を変更した後、どのように子ページからapp.componentにアクセスするのですか？ときに我々我々のアプリケーションで

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

そのように各コンポーネント、親そして子供は、お互いの公的な方法と特性にアクセスすることができます。私は、親コンポーネントから可能な限り多くのものを管理し、必要に応じて下位に委任しようとします。