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

实现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这个属性的双向绑定