在Angular 8中,可以使用ngTemplateOutlet
指令来传递控件到模板驱动表单中。下面是一个使用ngTemplateOutlet
的示例解决方法:
首先,在组件中定义一个模板引用变量,用于引用模板中的控件。例如,假设我们要传递一个FormControl
实例到模板中,可以这样定义一个模板引用变量:
然后,在组件类中,使用ViewChild
装饰器来获取模板引用变量的实例。例如,假设我们的模板引用变量名为formControlTemplate
,可以这样获取它的实例:
import { Component, ViewChild, TemplateRef } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('formControlTemplate', { static: true }) formControlTemplate: TemplateRef;
formControl: FormControl;
constructor() {
this.formControl = new FormControl();
}
}
接下来,在模板中使用ngTemplateOutlet
指令来传递控件。使用ngTemplateOutlet
指令时,可以通过ngTemplateOutletContext
属性传递上下文数据。例如,可以将formControl
变量传递给模板:
这样,控件就会被传递到模板中,并绑定到对应的FormControl
实例。
完整的示例代码如下所示:
// app.component.ts
import { Component, ViewChild, TemplateRef } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('formControlTemplate', { static: true }) formControlTemplate: TemplateRef;
formControl: FormControl;
constructor() {
this.formControl = new FormControl();
}
}
希望以上解决方法对您有所帮助!