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>。< / p>

我将开始一项研究，看看<ng-template #fieldTemplate>的使用是否也是一个可行的选择，同时我希望有人可以用@Pipe来阐明这项功能的可行性。< / p>

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等将在公共文件夹中声明并导入到当前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); }
}

Angular2：使用Pipe动态呈现模板

1 个答案: