创建动态用户界面组件：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>

如果您使用的是离子型，您可以使用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”。

创建动态用户界面组件：Angular 2和Ionic2

相关推荐