創建動態用戶界面組件：Angular 2和Ionic2

我已經嘗試了多種方法將數據從我的ts文件解析到另一個文件。我正在使用數組和對象。但是，當我控制檯登錄時，它表示沒有數據正在被解析。創建動態用戶界面組件：Angular 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)

最後，最終，它將綁定無論這是由用戶輸入到HTML低於

 <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>

來源

2017-01-10 FaridAvesko

如果您使用的是離子型，您可以使用navParams將數據從父頁面傳遞到子頁面。請檢查此鏈接：https://ionicframework.com/docs/v2/api/components/nav/NavPush/ –

我正在創建一個可重用的組件。我必須創建一個包含ionic2自身的動態HeaderComponent。 – FaridAvesko

您是否希望用戶輸入的標題配置保持不變或用戶每次打開應用程序時都應該輸入？ –

所以文件顯示，據我所知有兩個問題。 1.要通過數據從第一個文件到第二個文件&保持不變，爲此，您可以使用Sqlite插件將_headerConfig json保存到localStorage或Sqlite中，並將數據提取到ngOnInit並將其分配給變量，然後可以訪問本地存儲器中的數據整個應用程序 2.用於顯示輸出，即綁定圖標名稱改爲名稱屬性而不是name =「{{leftButton.logo}}」use：[name] =「leftButton.logo」。

來源

2017-01-11 07:51:47

創建動態用戶界面組件：Angular 2和Ionic2

回答

相關問題