typescript - Angular 2 : Use Pipe to render templates dynamically

Question

我正在创建一个从后端获取字段的表单。映射后，我有这样的东西:

genericFilters: {
        iboId: {
            'display': false,
            'template': ''
        },
        iboCode: {
            'display': true,
            'template': 'text_input_iboCode',
            /*'template': 'text/iboCode'*/
        },
        iboName: {
            'display': true,
            'template': 'text_input_iboName'
        },
        iboSurname: {
            'display': true,
            'template': 'text_input_iboSurname'
        },
        iboRank: {
            'display': false,
            'template': 'multiselect_iboRank',
            /*'template': 'select/multi_iboRank',*/
        },
        iboEmail: {
            'display': false,
            'template': 'text_input_iboEmail'
        },
        iboNewsletter: {
            'display': true,
            'template': 'simple_select_iboNewsletter',
            /*'template': 'select/simple_iboNewsletter',*/
        },
    };

我的想法是在应用程序级别为表单字段创建每个字段类型( checkbox 、 multiselect 、 text 、 radio 等)。并使用映射的 JSON上面将特定字段类型应用于从后端接收的每个字段。

在我的示例中，字段 iboId应具有字段类型 <text_input_iboCode> .

所以，在我看来，我不想拥有这样的东西:

<text_input_iboCode></text_input_iboCode>
<text_input_iboName></text_input_iboName>
<text_input_iboSurname></text_input_iboSurname>

我实际上想让表单创建更抽象，像这样:

<div *ngFor="let field of genericFilters | dynamicTemplateProcessorPipe">
    {{field.template}} <!--This should equal '<text_input_iboName>' for example-->
</div>

问题:

我要月亮吗？这可能吗？是否有其他或更好的方法来实现这一目标？我在滥用 @Pipe 吗？功能？

我实际上使用的是@Pipe用于翻译、格式化、循环 objects在模板等中。我想我也可以用它们来 return一个<fieldTemplate> .

我将开始研究以查看 <ng-template #fieldTemplate> 的使用情况也可能是一个可行的选择，同时我希望有人可以通过 @Pipe 阐明此功能的可行性。 .

Answer 1

在继续我的研究之后，我找不到一种方法来实现我想要的 @Pipe ，并且有充分的理由:@Pipe不应该那样工作。

我找到了 Angular 4 的 NgComponentOutlet .

我开始使用它，但我的第一个例子是这样的:

@Component({selector: 'text-input-ibo-name', template: '<input type="text" name="ibo_name">'})
class TextIboName {
}
@Component({
  selector: 'ng-my-form',
  template: `<ng-container *ngComponentOutlet="TextIboName"></ng-container>`
})
class NgMyForm {
  // This field is necessary to expose HelloWorld to the template.
  TextIboName = TextIboName;
}

这是基础。现在我只需要看看如何申请 <ng-container *ngComponentOutlet="TextIboName"></ng-container>在我的 *ngFor (见 OP)。

如果人们要求，我可以用更具体和“最终”的代码更新这个答案。

更新:

这将是我选择 template 的第一种方法对于在映射 JSON 上声明的那个字段.

<div *ngFor="let field of genericFilters | dynamicTemplateProcessorPipe">
    <ng-container *ngComponentOutlet="{{field.template}}"></ng-container>
</div>

类 TextIboName , TextIboCode , TextIboSurname等。将在公共(public)文件夹中声明并导入到当前component ，只是为了有一个更抽象的方法。

目标是能够在整个应用程序中重复使用这些字段。像这样，我将能够复制字段 TextIboName在其他地方无需复制/粘贴 HTML代码或 templates .

更新 2:

如果我们移动我们的“字段组件”，在我的示例中将是 TextIboName到另一个内部的外部文件夹 @ngModule或者我们只是想使用来自另一个 @ngModule 的外部类我们将不得不使用 NgModuleFactory .

改编以上代码:

@Component({
  selector: 'ng-my-form',
  template: `
    <ng-container *ngComponentOutlet="TextIboName;
                                      ngModuleFactory: myModule;"></ng-container>`
})
class NgMyForm {
  // This field is necessary to expose OtherModuleComponent to the template.
  TextIboName = TextIboName;
  myModule: NgModuleFactory<any>;
  constructor(compiler: Compiler) { this.myModule = compiler.compileModuleSync(OtherModule); }
}