【angular学习】自定义实现双向绑定

最新推荐文章于 2024-11-27 18:59:35 发布

转载最新推荐文章于 2024-11-27 18:59:35 发布 · 781 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://coding.imooc.com/lesson/336.html#mid=25790

文章标签：

#angular

angular 专栏收录该内容

44 篇文章

订阅专栏

这篇博客介绍了Angular中双向绑定的工作原理，通过`[(ngModel)]`指令简化了属性绑定和事件绑定的过程。讲解了`ngModel`实际上是如何结合属性绑定和事件绑定的，并展示了如何使用`[()]`语法糖来实现自定义的双向绑定。文章通过一个具体的例子展示了如何在`horizontal-grid.component.ts`和`horizontal-grid.component.html`文件中实现`username`属性的双向绑定，并在`app.component.html`中应用。

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

实现username属性的双向绑定

根据慕课网教程代码
horizontal-grid.component.html

<!-- Angular 中的双向绑定其实就是属性绑定+事件绑定-->
<!-- <input [value]="username" (input)="username = $event.target.value" />
<p>你好 {{ username }}!</p> -->
<!-- FormsModule 中提供的指令 ngModel 可以简化双向绑定的流程 -->
<!-- <input [(ngModel)]="username" />
<p>你好 {{ username }}!</p> -->
<!-- 但 ngModel 也不是什么黑魔法，其实还是属性绑定 + 事件绑定，只不过提供了 [()] 形式的语法糖 -->
<!-- <input [ngModel]="username" (ngModelChange)="username = $event" />
<p>你好 {{ username }}!</p> -->
<!-- [()] 形式的语法糖也不是什么黑魔法，我们也可以自己实现一个 -->
<input [value]="username" (input)="username = $event.target.value" />
<p>你好 {{ username }}!</p>

horizontal-grid.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-horizontal-grid',
  templateUrl: './horizontal-grid.component.html',
  styleUrls: ['./horizontal-grid.component.css']
})
export class HorizontalGridComponent implements OnInit {
  private _username = '';
  @Output() usernameChange = new EventEmitter();
  constructor() {}

  ngOnInit() {}

  /**
   * get / set 是属性访问限定符，如果我们对于属性的读和写有一些逻辑操作
   * 可以利用 get / set 进行处理
   */
  @Input()
  public get username(): string {
    return this._username;
  }

  public set username(value: string) {
    this._username = value;
    this.usernameChange.emit(this._username);
  }
}

app.component.html

<app-horizontal-grid [(username)]="username"></app-horizontal-grid>
{{username}}

实现username这个属性的双向绑定