创建动态UI组件：Angular 2&；Ionic2

我尝试了多种方法将数据从ts文件解析到另一个文件。我正在使用数组和对象。然而，当我记录控制台日志时，它表示没有正在解析的数据

例如，我想将数组列表中的数据从父文件解析到子文件

例如，我的第一个代码是开发人员将在其中输入数据的地方。在logo中，他们希望使用名为“md alarm”的图标类，他们将在公共左菜单中键入：a[]

export class HeaderComponent{

private _headerConfig:any = {

    title:"",

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

};

这是ui逻辑将处理的地方。问题是，我不确定我应该如何写出语法，以便我将上面代码中输入的数据解析到这里。我确信我下面的语法是错误的(

最后，它最终会将用户输入的任何内容绑定到下面显示的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>

---

因此，据我所知，有两个问题。 1.将数据从第一个文件传递到第二个文件并将其持久化。为此，您可以使用Sqlite插件将_headerConfigJSON保存到localStorage或Sqlite，然后在ngOnInit上获取数据并将其分配给变量。然后可以通过应用程序访问本地存储中的数据。 2.用于显示输出，即将图标名称绑定到名称属性，

---

而不是name=“{{leftButton.logo}}”使用：[name]=“leftButton.logo”.

如果您使用的是ionic，您可以使用navParams将数据从父页面传递到子页面。请检查此链接：我正在创建一个可重用组件。我必须创建一个包装ionic2本身的动态HeaderComponent。您希望保留用户输入的标题配置，还是用户每次打开应用程序时都应输入的标题配置开发人员可以输入任何图标，它会显示出来。他们不应该每次打开应用程序都输入。我正在创建一个可重用的UI组件。因此，基本上，如果在我的第一个ts文件中的leftMenu:[徽标:]中没有输入，它将显示默认徽标，可以在我的第二个菜单中的_defaultConfig:any{leftMenu:[图标：“md alarm”]}。我被告知要使用object.assign，但即使我尝试了，我也不知道如何使用它。因为我面临的最大问题是，我不太知道如何使用字符串插值将输出显示到我的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>