Angular基础知识学习（一）下-阿里云开发者社区

事件

普通点击事件

首先修改 html 文件：

<h3>事件</h3>
<button (click)="run()">执行事件</button>
<br>
<br>
<button (click)="getData()">获取数据</button>
<br>
<br>
<strong>{{title}}</strong>
<br>
<br>
<button (click)="setData()">设置数据</button>
<br>
<br>
<button (click)="runEvent($event)" id="btn">执行方法获取事件对象</button>
<br>
复制代码

然后在 argular01.component.ts 文件中添加实现方法

title = '这是一个主题';
  keywords = '这是一个input'
  run() {
    alert('hello');
  }
  constructor() { }
  ngOnInit(): void {
  }
  getData() {
    alert(this.title);
  }
  setData() {
    this.title = '新的主题';
  }
  runEvent(e) {
    var dom = e.target;
    dom.style.color = 'red';
  }
复制代码

网页展示效果如下：

表单事件

html 文件：

<h3>表单事件 事件对象</h3>
<!--<input type="text" (keydown)="keydown()">-->
<br>
<input type="text" (keydown)="keydown($event)">
<br>
<input type="text" (keyup)="keyup($event)" >
复制代码

然后在 argular01.component.ts 文件中添加实现方法

keydown(e) {
    console.log(e.target.value);
  }
  keyup(e) {
    if (e.keyCode == 13) {
      console.log('敲了一下回车');
    }
  }
复制代码

网页展示效果如下：

补充语句与事件绑定的例子，语句上下文可以引用模板自身上下文中的属性，在上面例子中把模板的$event对象传给了组件中的事件处理方法，还可以将模板输入变量 (let key)和模板引用变量 (#inputDom) 传到组件方法中。

<input type="text" #inputDom (input)="getData2(inputDom.value)" />
    <br>
    <div>
      <ul>
        <li *ngFor="let item of nums; let key =index">
          <span>{{key+1}}----{{item}}</span>&nbsp;
          <button (click)="delete(key)">X</button>
        </li>
      </ul>
    </div>
复制代码

事件方法定义如下：

getData2(data: any) {
    console.log(data);
  }
  delete(key) {
    this.nums.splice(key, 1);
  }
复制代码

页面测试：

双向数据绑定

双向绑定会做两件事：

设置特定的元素属性。
监听元素的变更事件。
Angular 为此提供了一种特殊的双向数据绑定语法 [()]。[()] 语法将属性绑定的括号 [] 与事件绑定的括号 () 组合在一起。

首先在 app.module.ts 里面引入 NgModule 并声明。

// 浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
// Angular核心模块
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
// 根组件
......
// @NgModule装饰器，@NgModule接受一个元数据对象，告诉 Angular 如何编译和启动应用
@NgModule({
  declarations: [// 配置当前项目运行的组件
    AppComponent, NewsComponent, Argular01Component, FormComponent, SearchComponent
  ],
  imports: [// 配置当前模块运行依赖的其他模块
    BrowserModule,
    FormsModule
  ],
  providers: [StorageService],
  bootstrap: [AppComponent]
})
export class AppModule { }
复制代码

html 文件内容：

<h3>双向绑定</h3>
    <p><input type="text" [(ngModel)]="keywords"></p>
    <span>{{keywords}}</span>
    <br>
    <br>
    <span><button (click)="upkeywords()">修改数据</button></span>
复制代码

最后在 argular01.component.ts 定义变量和方法。

keywords = '这是一个input';
upkeywords() {
    this.keywords = '改变后的数据';
}
复制代码

网页展示效果：

关于 input 框双向数据绑定，在上面介绍的 (input)="getData2(inputDom.value)"方法，修改一下也可以实现同样的效果。

$event 和事件处理语句

html 文件：

<p>input数据绑定：<input [value]="keywords"
                    (input)="keywords=$event.target.value" ></p>
<span>{{keywords}}</span>
复制代码

上面的代码在把输入框的 value 属性绑定到 name 属性。要监听对值的修改，代码绑定到输入框的 input 事件。当用户造成更改时，input 事件被触发，并在包含了 DOM 事件对象 ($event) 的上下文中执行这条语句。

要更新 name 属性，就要通过路径 $event.target.value 来获取更改后的值。

页面测试：

Form表单

新建一个组件：

ng g component components/form
复制代码

首先在 app.module.ts 里面引入 NgModule 并声明。

1、form.component.html

<h2>人员登记系统</h2>
  <!--讲解表单 input、checkbox、radio、select、textarea实现在线预约功能-->
  <div class="people_list">
    <ul>
      <li>
        姓 名：
        <input type="text" [(ngModel)]="peopleInfo.username" id="username" class="form_input">
      </li>
      <li>
        性 别：
        <input type="radio" value="1" name="sex" id="man" [(ngModel)]="peopleInfo.sex"> <label for="man">男</label>
        <input type="radio" value="2" name="sex" id="woman" [(ngModel)]="peopleInfo.sex"> <label for="woman">女</label>
      </li>
      <li>
        城 市：
        <select [(ngModel)]="peopleInfo.city">
          <option *ngFor="let item of peopleInfo.cities">
            {{item}}
          </option>
        </select>
      </li>
      <li>
        爱 好：
        <span *ngFor="let item of peopleInfo.hobbies;let key=index" >
          <input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked"><label [for]="'check'+key">{{item.title}}</label>
          &nbsp;&nbsp;
        </span>
      </li>
      <li>
        备 注：
        <textarea [(ngModel)]="peopleInfo.remark" cols="30" rows="2"></textarea>
      </li>
      <br>
      <button (click)="getData()">获取表单的值</button>
      <pre>
        {{peopleInfo | json}}
      </pre>
    </ul>
  </div>
复制代码

2、form.component.css

ul,ol{
  list-style-type: none;
}
*{
  margin: 0px;
  padding:0px;
}
h2{
  text-align: center;
}
.people_list{
  width: 400px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #eeeeee;
}
.people_list li{
  height: 50px;
  line-height: 50px;
}
.form_input{
  width: 300px;
  height: 28px;
}
复制代码

3、form.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  peopleInfo: any = {
    username: '',
    sex: '1',
    cities: ['北京', '上海', '深圳'],
    city: '上海',
    hobbies: [
      {
        title: '吃饭',
        checked: false
      },
      {
        title: '睡觉',
        checked: false
      },
      {
        title: '写代码',
        checked: true
      }
    ],
    remark: ''
  }
  constructor() { }
  ngOnInit(): void {
  }
  getData() {
    console.log(this.peopleInfo);
  }
}
复制代码

4、网页展示效果

5、小结

对于性别单选和爱好多选框，勾选时前台发生了什么变化，双向数据绑定了什么样的数据。

上面动图中注意观察 ng-reflect-model 值的变化。

搜索

新建一个组件：

ng g component components/search
复制代码

首先在 app.module.ts 里面引入 NgModule 并声明。

1、search.component.html

<h2>search</h2>
<div class="search">
  <input type="text" [(ngModel)]="keyWord" (keyup)="keyup($event)">&nbsp;&nbsp;    <button (click)="search()">搜索</button>
  <hr>
  <ul>
    <li  *ngFor="let item of keyWordsOld;let key=index"> {{item}} ----- <button (click)="delete(key)">X</button></li>
  </ul>
</div>
复制代码

2、search.component.ts

keyWord: any = '';
keyWordsOld: any[] = [];
keyup(e) {
    if (e.keyCode === 13){
        if (this.keyWordsOld.indexOf(this.keyWord) === -1) {
            this.keyWordsOld.push(this.keyWord);
        }
        this.keyWord = '';
    }
}
search() {
    if (this.keyWordsOld.indexOf(this.keyWord) == -1) {
        this.keyWordsOld.push(this.keyWord);
    }
    this.keyWord = '';
}
delete(key) {
    this.keyWordsOld.splice(key, 1);
}
复制代码

3、网页展示效果

结合我们日常使用淘宝京东的习惯，搜索记录都会保留下来，这就涉及到数据持久化，后续会整合讲解。

TodoList(待办事项和已完成事项)

练习双向绑定来实现代办事项和已完成事项的转变。

1、search.component.html

<h2>搜   索todoList</h2>
<div class="search">
  <input type="text" [(ngModel)]="product" (keyup)="add($event)" >
  <hr>
  待办事项
  <ul>
    <li *ngFor="let item of products;let key=index" [hidden]="item.status == 1">
      <input type="checkbox" [(ngModel)]="item.status">{{item.status}} ----  {{item.title}}
      ----- <button (click)="deleteWay(key)">X</button>
    </li>
  </ul>
  <hr>
  已办事项
  <ul>
    <li *ngFor="let item of products;let key=index" [hidden]="item.status == 0">
      <input type="checkbox" [(ngModel)]="item.status" >{{item.status}} ----  {{item.title}}
      ----- <button (click)="deleteWay(key)">X</button>
    </li>
  </ul>
      <hr>
  <div>
    <pre>
      {{products | json}}
    </pre>
  </div>
</div>
复制代码

2、search.component.ts

product: any = '';
products: any[] = [];
add(e) {
    // tslint:disable-next-line:triple-equals
    if (e.keyCode == 13) {
        if (!this.equalProduct(this.products, this.product)) {
            this.products.push({
                title: this.product,
                status: 0
            });
            this.product = '';
        } else {
            alert('数据已存在');
            this.product = '';
        }
    }
}
deleteWay(key) {
    this.products.splice(key, 1);
}
equalProduct(products: any[], value: any) {
    if (!value || value === '') {
        return false;
    }
    // tslint:disable-next-line:prefer-for-of
    for (let i = 0; i < products.length; i++) {
        // tslint:disable-next-line:triple-equals
        if (products[i].title == value) {
            return true;
        }
    }
    return false;
}
复制代码