2017-01-10 10 views
0

私はtsファイルから別のものにデータを解析するのに複数の方法を試みました。私は配列とオブジェクトを使用しています。しかし、私はログをコンソールに、それはデータが解析されていないと述べた。ダイナミックUIコンポーネントを作成する:角度2とIonic2

たとえば、配列リストのデータを親ファイルから子ファイルに解析したいとします。

最初のコードは、開発者がデータを入力する場所です(例)。ロゴには、彼らは「MD-アラーム」と呼ばれるアイコンのクラスを使用したい、彼らは公共LeftMenu内で入力します:[] ...

export class HeaderComponent{ 

private _headerConfig:any = { 

    title:"", 

    LeftMenu : [ 
    {logo: "md-alarm"}, 
    ], 

}; 

私のUIロジックを処理する場所です。事は、私は私がここに上記のコードに入力されていたデータを解析するために構文を書き出すと仮定する方法がわかりません。私の構文が間違っていると確信しています。 :(

export class KdHeader implements OnInit { 

public title: any = {}; 
public leftButton : any = [ 
          {logo:""} 
          ]; 




private _defaultConfig: any = { 
    title: "Please Specify You title", 

    leftButton :[ 
    { icon : "md-alarm" }, 
    ] 

}; 
{ 
@Input() config: any; 

ngOnInit() { 
    console.log(this.config); 
    if(this.config.leftMenu.logo == ""){ 
     this.leftButton.logo = this._defaultConfig.leftButton.icon; 
    } else { 
     this.leftButton.logo = this.config._LeftButton.logo; 
    } 
    if(this.config.LeftMenu) 

最後に、私は2つの問題がある理解では最終的に、それは、それはとても

 <ion-buttons start class='ion-btn-start'> 
     <button ion-button class="logo-btn"> 
      <ion-icon name="{{leftButton.logo}}"> 
      </ion-icon> 
     </button> 


      <!-- Button 2 --> 
     <!-- <button ion-button class="btn2-icon"> 
      <ion-icon name="{{button2}}"> 
      </ion-icon> 
     </button> --> 
    </ion-buttons> 
+0

ionicを使用している場合は、navParamsを使用して親ページから子ページにデータを渡すことができます。 Plsはこのリンクをチェックします:https://ionicframework.com/docs/v2/api/components/nav/NavPush/ –

+0

私は再利用可能なコンポーネントを作成しています。私はionic2自体をラップする動的なHeaderComponentを作成する必要があります。 – FaridAvesko

+0

ユーザーが入力するヘッダーの設定を永続化するか、ユーザーがアプリを開くたびに入力する必要がありますか? –

答えて

0

以下のhtmlファイルを表示するためにユーザーが入力したものは何でもバインドします。 1.渡すには最初のファイルから第2のファイルへのデータを&に保存します。このため、Sqliteプラグインを使用して_headerConfig jsonをlocalStorageまたはSqliteに保存し、ngOnInitにデータをフェッチして変数に割り当てます。アプリケーション全体で。 2.出力を表示するために、つまり、 name = "{{leftButton.logo}}"の代わりに という名前の属性にアイコン名を追加するには、[name] = "leftButton.logo"を使用します。

関連する問題