[TOC] >[success] # 雙向綁定 >[success] ## input事件 + value 組合  這個 **雙向綁定** 有點類似 **vue** 的 **@input + value** 的組合。 這里有個問題，在 **html** 中直接使用 **$event.target.value** 會報錯，因為 **ts 不知道這個東西是否存在** ，所以就需要使用 **$any() ,這個html中的方法就相當于 ts里面的 as any的操作.** ，具體說明我在網上查了一些[文檔](https://blog.csdn.net/Damien_J_Scott/article/details/117460992)，**$any()** 也有可能會有問題，直接定義一個方法把，然后在方法內寫賦值邏輯 **html代碼** ~~~ <input type="text" [value]="username" (input)="username = $any($event.target).value" /> <span>你好，{{ username }}</span> ~~~ **ts代碼** ~~~ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-horizontal-grid', templateUrl: './horizontal-grid.component.html', styleUrls: ['./horizontal-grid.component.css'] }) export class HorizontalGridComponent implements OnInit { username = ''; constructor() {} ngOnInit() {} } ~~~ >[success] ## ngModel  **ngModel** 跟 **vue** 的 **v-model** ，很像，在使用 **ngModel**，之前，我們需要在 **app.module.ts** 中引入 **FormsModule** 才可以使用  **html代碼** ~~~ <input type="text" [(ngModel)]="username" /> <span>你好，{{ username }}</span> ~~~ **ts代碼** ~~~ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-horizontal-grid', templateUrl: './horizontal-grid.component.html', styleUrls: ['./horizontal-grid.component.css'] }) export class HorizontalGridComponent implements OnInit { username = ''; constructor() {} ngOnInit() {} } ~~~ >[success] ## 實現一個雙向數據綁定（根據vue寫法推斷出來的） 1. **父組件寫法：** **父組件 html** ~~~ <app-horizontal-grid [(username)]="username"></app-horizontal-grid> ~~~ **父組件 ts** ~~~ { username = '默認值'; } ~~~ 2. **子組件寫法：** **子組件 html** ~~~ <input type="text" [value]="username" (input)="handleInput($event)" /> ~~~ **子組件 ts** ~~~ import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'app-horizontal-grid', templateUrl: './horizontal-grid.component.html', styleUrls: ['./horizontal-grid.component.css'] }) export class HorizontalGridComponent { // 父組件傳入的 username 屬性 @Input() username = ''; // 定義 emit 方法 @Output() usernameChange = new EventEmitter(); // eslint-disable-next-line @typescript-eslint/no-empty-function constructor() {} // input監聽事件 handleInput(ev: any) { // 通過 emit 把 input 更新的值，傳給父組件 this.usernameChange.emit(ev.target.value); } } ~~~ >[success] ## 實現一個雙向數據綁定（angular視頻版本） 實際上 **vue 版本與 angula r版本實現的效果是一樣的** ，本質上都是相同的，**都是在數據變化時，通過 **emit** 把數據傳遞給父組件**，**vue 版本是通過 **Oninput** 事件變化時傳遞給父組件，而 angular 版本是通過計算屬性 get set ，每次 set 時監聽數據變化，就通過 emit 把數據回傳給父組件** 1. **父組件寫法：** **父組件 html** ~~~ <app-horizontal-grid [(username)]="username"></app-horizontal-grid> ~~~ **父組件 ts** ~~~ { username = '默認值'; } ~~~ 2. **子組件寫法（不同之處就是在子組件的 get set這里）**： **子組件 html** ~~~ <input type="text" [value]="username" (input)="username = $any($event.target).value" /> ~~~ **子組件 ts** ~~~ import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'app-horizontal-grid', templateUrl: './horizontal-grid.component.html', styleUrls: ['./horizontal-grid.component.css'] }) export class HorizontalGridComponent { private _username = ''; // 私有屬性 // 定義 emit 方法 @Output() usernameChange = new EventEmitter(); // eslint-disable-next-line @typescript-eslint/no-empty-function constructor() {} // 獲取 username @Input() public get username(): string { return this._username; } // 寫入 username public set username(value: string) { this._username = value; // 通過 emit 把 input 更新的值，傳給父組件 this.usernameChange.emit(value); } } ~~~