在Angular 4中,可以使用ngModel指令实现双向数据绑定。下面是一个使用ngModel替代[checked]属性的示例代码:
HTML模板:
Checkbox
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-checkbox',
template: `
Checkbox
`
})
export class CheckboxComponent {
isChecked: boolean = false;
}
在上述示例中,使用[(ngModel)]
语法将isChecked
属性与复选框的状态进行双向绑定。当复选框的状态改变时,isChecked
属性的值也会相应更新。
注意:使用ngModel需要先在模块中导入FormsModule。
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
],
declarations: [
CheckboxComponent
],
exports: [
CheckboxComponent
]
})
export class CheckboxModule { }
这样就可以在其他模块中使用CheckboxComponent组件,并且使用ngModel进行双向绑定,而不需要使用[checked]和name属性了。