Angular2（单击）动态加载组件视图

我在单击时创建了一个动态加载组件视图，但每次单击都是单独的。我希望有一个函数，我通过函数传递一个字符串，而不是在函数中输入该字符串来加载视图

这是一个正在工作的打捞器

组件

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Lets dynamically create some components!</h2>
      <button (click)="createHelloWorldComponent()">Create Hello World</button>
      <button (click)="createWorldHelloComponent()">Create World Hello</button>
      <dynamic-component [componentData]="componentData"></dynamic-component>
    </div>
  `,
})

export class App {
  componentData = null;

  createHelloWorldComponent(){

    this.componentData = {
      component: HelloWorldComponent,
      inputs: {
        showNum: 9
      }
    };
  }

  createWorldHelloComponent(){
    this.componentData = {
      component: WorldHelloComponent,
      inputs: {
        showNum: 2
      }
    };
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
让我们动态地创建一些组件！
创建Hello World
创造世界你好
`,
})
导出类应用程序{
componentData=null；
createHelloWorldComponent（）{
this.componentData={
组件：HelloWorldComponent，
投入：{
showNum:9
}
};
}
createWorldHelloComponent（）{
this.componentData={
组件：WorldHelloComponent，
投入：{
showNum:2
}
};
}
}

我们想要的是一个函数，并从数组中定义一个在（单击）中传递并加载视图的变量。 这里有一个尝试性的例子：

@组件({
选择器：“我的应用程序”，
模板：`
让我们动态地创建一些组件！

{{item.id}

`,
})
导出类应用程序{
componentData=null；
myMenu={}；
构造函数（）{
this.myMenu=myMenu；
}
loadView（视图名称）{
this.componentData={
组件：viewName，
投入：{
showNum:9
}
};
}
}
常量myMenu=[
{
id:1，
视图名称：“HelloWorldComponent”
},
{
id:2，
视图名称：“WorldHelloComponent”
},
];

使用以下代码

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Lets dynamically create some components!</h2>
      <button (click)="createComponent($event)">Create Hello World</button>
      <button (click)="createComponent($event)">Create World Hello</button>
      <dynamic-component [componentData]="componentData"></dynamic-component>
    </div>
  `,
})

更新了您的plunker

更新1：当您还没有准备好在if条件下处理它们时，您应该有一个映射属性来根据单击的项返回componentData

var myComponents =[{
        id : 1,
        component: HelloWorldComponent,
        inputs: { showNum: 9 }
    },{
        id : 2,
        component: WorldHelloComponent,
        inputs: { showNum: 0 }
    }];
var myMenu =    [{
    id: 1, 
    viewname: 'HelloWorldComponent',
    componentID : 1
    },
    {
     id: 2, 
     viewname: 'WorldHelloComponent',
     componentID : 2
    }];

---

您传递的是一个事件，而不是读取innehr HTML，但我希望不是传递事件，而是从数组中插入数据并将其传递给函数。按钮内部的HTMl将完全不同。所以我可以用你的例子。最后，我将以1000条if语句作为结束语：（通过查找拼写检查和有意义的句子来更新上述注释。注释已更新，但您是否看到我的plunker带有数组？您应该使用json数组中的属性来指向特定组件数据。将在一分钟内更新plunker，然后告诉Hurray，您完成了！太棒了。因此，您将该项传递到click函数中，然后n使用u.find将其链接到myComponents。。。

createComponent(val){
    if(val.srcElement.innerHTML==='Create Hello World')
    {
      this.createHelloWorldComponent()
    }
     if(val.srcElement.innerHTML==='Create World Hello'){
       this.createWorldHelloComponent()
     }
  }

var myComponents =[{
        id : 1,
        component: HelloWorldComponent,
        inputs: { showNum: 9 }
    },{
        id : 2,
        component: WorldHelloComponent,
        inputs: { showNum: 0 }
    }];
var myMenu =    [{
    id: 1, 
    viewname: 'HelloWorldComponent',
    componentID : 1
    },
    {
     id: 2, 
     viewname: 'WorldHelloComponent',
     componentID : 2
    }];