导航

angular

一篇文章不足以介绍一个框架，本文仅展示部分使用示例，以与其他框架进行横向对比

数据双向绑定示例

Angular双向绑定

Angular语法设计上支持双向绑定写法，并为HTML元素新增了ngModel内置指令。
Vue的v-model语法糖正是借鉴了Angular这个指令。

html

<div id="app">
    <div>msg: {{msg}}</div>
    <input [(ngModel)]="msg" />
</div>

ts

import { Component } from '@angular/core'

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.less'],
})
export class AppComponent {
    msg = ''
}

Angular单向绑定实现数据双向绑定

html

<div id="app">
    <div>msg: {{msg}}</div>
    <input [value]="msg" (input)="inputHandler($event)" />
</div>

ts

import { Component } from '@angular/core'

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.less'],
})
export class AppComponent {
    msg = ''

    inputHandler(e: Event){
        this.msg = (e.target as HTMLInputElement).value
    }
}