Angular2:使用管道来渲染模板动态Angular2:使用管道来渲染模板动态(Angular2:

2019-05-12 08:37发布

我创建一个表单,我从后端的字段。 映射后,我有这样的事情:

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',*/
        },
    };

我这背后的想法是创建的每个字段类型( checkboxmultiselecttextradio在应用水平,为表单字段等)。 并使用映射JSON上面的某个域类型从后端应用到每个receieved领域。

在我的例子中,场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>也可能是一个可行的选择,在此期间,我希望有人能对这一功能doability打下一些轻@Pipe

Answer 1:

继续我的研究后,我查不出什么执行我想的方法@Pipe ,和一个很好的理由: @Pipe并不意味着这样的工作。

我发现,而不是角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>

这些类TextIboNameTextIboCodeTextIboSurname等将在一个共同的文件夹中声明,并且导入到当前的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: Use Pipe to render templates dynamically