[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);
}
}
~~~
- Angular8開發拼多多WebApp
- 框架對比
- 環境搭建與項目創建
- 開發工具配置
- 初始組件
- ngFor指令
- ngIf指令
- 樣式綁定的幾種方式
- 組件生命周期
- 在組件類中引用模版(類似vue 的 ref)
- 雙向綁定
- 什么是模塊
- 【以下目錄未完成】什么是注解(裝飾器)
- 指令的概念
- 組件的事件綁定和樣式綁定
- 組件嵌套和投影組件
- 路由概念
- 路由實戰
- 路由URL和參數
- 管道的概念
- 依賴注入
- 臟值檢測
- HTTP 概覽
- Postman 和 Rest Client 調試 HTTP
- Rest API
- HttpClient 修改
- Http 攔截器 HttpInterceptor
- 其他
- Angular終極課程
- RxJS快速入門