创建通用组件-Angular2

Question

我希望创建一个通用组件，它接受对象数组（例如：Person，Address）和用于映射的相应模板（可以说是卡片模板），这是可编辑的。一旦我点击卡片，我就会获得带有各自模型属性的modalpopup，我可以编辑这些属性并将其反映在卡片列表中。

直到现在我所取得的成就是， 我创建了CardList组件，它将数组对象和相应的模板作为输入，按预期显示卡片。

我的演示代码链接：https://stackblitz.com/edit/angular-mwyjic

所以点击编辑我得到相应的对象，我可以更新。

所以我想要达到的目标是： 1.我应该能够识别弹出窗口中的当前对象类型（即人或地址） 2.我应该能够根据当前模型填充模态结构[任何可能的方法或者我们可以将模板作为模态的参考吗？或者我们如何将模态模板作为输入。或者我需要使用reative形式来构建反应形式？ ]需要这方面的建议。 3.以模态更新项目当前对象并反映卡片中的更改。

有关如何进一步处理的任何建议？

Answer 1

您需要一种在不知道类型的情况下提取对象属性的方法吗？然后我建议你研究一下Typescript（或者更好的是，Javascript）反思。

假设您有一个课程http://localhost和Foo：

Bar

请注意，必须定义它们并声明为此工作。它与如何将typescript编译为javascript有关 - 如果你没有在typescript中定义它们，编译的javascript类将不需要属性。

然后你就可以获得这样的属性并与之互动：

class Foo {
    private fooPropA: string = null;
    public fooPropB: string = null;
}

class Bar {
    private barPropA: number= null;
    public barPropB: number = null;
}