Question

我正在尝试为子组件创建动态模板。下面给出了设置模板内容和加载子组件以创建模板的方法。

父组件

 setTemplate(){
        var templateString = '<form (ngSubmit)="save(form.value)" [formGroup]="form"> testing form<input type="text" id="test1" [formControlName]="test1"></div><div class="pull-right"><input type="submit" class="btn btn-success waves-effect btn-orange" value="Save"><button type="submit" (click)="closeLeaseDialog()"  class="btn waves-effect waves-light btn-secondary">Cancel</button></div>'

 this.htmlContent = templateString;
       this.loadTemplate = true;
 }

父模板

<div class="row" *ngIf="loadTemplate">
                    <div class="col col-xs-12 col-md-12 col-sm-12 form-group" id="templateContent">
                        <app-html-template [htmlTemplate]="htmlContent"></app-html-template>
                    </div>
                </div>

子组件

@Component({
    selector: 'app-html-template',
    template: '<div [innerHtml]="htmlString"></div>'
})
export class TemplateComponent implements OnInit {

    @Input() htmlTemplate: any;
    htmlString: string;

    ngOnInit():void {
        this.htmlString = this.htmlTemplate
    }

    saveLeaseAgreement() {
        console.log("this.form",this.form);
        if (this.form.valid) {
        }
    }
}

但是上面代码生成的输出只有html字符串中出现的文字（＆＃34;测试形式＆＃34;＆＃34;取消＆＃34;）它不会生成html中存在的任何形式和输入元素字符串（表单和输入元素）。

我正在努力实现我们在角度1中使用$ compile做的事情。

Answer 1

您尝试做的事情要求您创建动态组件，使用[innerHTML}将不适用于您的用例。

如果你看看S.O.在这里回答它包含一个stackblitz示例，它将演示您需要做什么。

Angular: How to use reactive forms in a dynamic component

添加动态html内容angular 4

1 个答案: