angular的双向绑定机制

最新推荐文章于 2025-06-17 15:32:41 发布

原创最新推荐文章于 2025-06-17 15:32:41 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

Angular 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Angular的双向绑定机制，通过实例展示了[(ngModel)]如何实现模型与视图间的同步更新。讲解了单向绑定与双向绑定的区别，并提到了ng-reflect-model属性的作用。同时，提及了#usernameRef="ngModel"用于组件内部引用及表单验证的情景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习angular2，入门小白。

双向绑定机制早就用过，但是没有更好地往里面探究。

今天系统学习，发现这机制很厉害。

双向绑定用[()]来表示，一般是绑定ngModel属性，用法是：[(ngModel)]="username"。

[]是单向绑定，就是说我们在组件中给model赋的值会设置到HTML的input控件中。

[()]是双向绑定，就是说HTML对应控件的状态改变会反射设置到组件的model中。

下面是例子：

这是组件：

<form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
  <!--[(ngModel)]="username"中[()]是双向绑定的意思：HTML中的对应控件的状态改变会反射设置到组件的model中-->
  <!--required要求该表单不为 空-->
  <!--minlength最小长度-->
  <!--这里双向绑定之后还加了引用#usernameRef，是因为要在模板中使用才加入，一般要加。-->

  <input class="ng-pristine ng-invalid ng-touched" type="text" [(ngModel)]="username" #usernameRef="ngModel"
         name="username" required minlength="2"/>
  <!--{{usernameRef.errors|json}}-->
  <div *ngIf="usernameRef.errors?.required">必填项</div>
  <div *ngIf="usernameRef.errors?.minlength">最少字数没达到</div>
  <input type="password" [(ngModel)]="password" #passwordRef="ngModel" name="password" required/>
  <!--{{passwordRef.valid}}-->
  <div *ngIf="passwordRef.errors?.required">必填项</div>
  <button (click)="onClick()">login</button>
  <button type="submit">Submit</button>
</form>

模板：

export class LoginComponent implements OnInit {
  //学习双向绑定和表单验证
  //需要在类中同样定义变量，但由于双向绑定机制，会调取组件中的内容
  username = "";
  password = "";

  constructor(@Inject('auth') private service, @Inject('url') private url) {
  }

  ngOnInit() {
  }

  onClick() {
    console.info("service+" + this.service.loginWithCredentials(this.username, this.password));
    console.info("service+" + this.username + ",and," + this.password);
    console.info(this.url);
  }

  onSubmit(formValue) {
    console.info(formValue)
  }
}

在组件中定义的[(ngModel)]="username" 会把这个input标签的状态反射设置到组件的model中，就是意味着这里设置的username值会赋到model中设置的username="";这个username中！（这里会默认使用input标签的value属性）。

我们可以在username这个input输入值的时候看到控制台如下：

这个ng-reflect-model=“123”是我在input中输入的值。这就是双向绑定的机制造成的，把输入的值放到一个自定义的标签属性中。可以查看下普通的input标签在输入值之后是不会把值放到"value"这个属性中的。

[(ngModel)]="username" 不能代替form标签中的name=“username”。

最后介绍引用：

我们可以看到组件中有#usernameRef="ngModel"，这是组件中其余部分对这个组件的ngModel进行引用时使用的。注意，是组件的其余部分对该组件进行引用时使用的，"#"开头的都是引用，但一般用Ref结尾。一般可以用来作为表单验证，onClick传值（有了双向引用，一般不使用这种方式传值）。

有所不足，请批评指教。