要创建一个响应式表单组件并将指令应用于另一个组件,你可以按照以下步骤进行操作:
ReactiveFormComponent
。import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-reactive-form',
template: `
`
})
export class ReactiveFormComponent {
form: FormGroup;
constructor() {
this.form = new FormGroup({
name: new FormControl('')
});
}
}
CustomDirective
。import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appCustomDirective]'
})
export class CustomDirective {
constructor(private elementRef: ElementRef) {
this.elementRef.nativeElement.style.color = 'red';
}
}
CustomDirective
。import { Component } from '@angular/core';
@Component({
selector: 'app-other-component',
template: `
This text will be red.
`
})
export class OtherComponent {}
ReactiveFormComponent
和CustomDirective
。import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { ReactiveFormComponent } from './reactive-form.component';
import { CustomDirective } from './custom.directive';
import { OtherComponent } from './other.component';
@NgModule({
declarations: [ReactiveFormComponent, CustomDirective, OtherComponent],
imports: [ReactiveFormsModule],
exports: [ReactiveFormComponent, CustomDirective, OtherComponent]
})
export class AppModule {}
现在,你可以在另一个组件中使用指令,同时在另一个组件中显示响应式表单组件。
上一篇:Angular创建新组件出现问题
下一篇:Angular窗口的高度和宽度