0
点赞
收藏
分享

微信扫一扫

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

创建 angular 组件

​​ https://github.com/angular/angular-cli​​

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html

创建组件命令

为了便于项目的管理和维护,我们将自己创建的组件存放进单独的文件夹。

在 app 文件夹下,我们创建一个名为 components 的文件夹用于存放我们的自定义组件。

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_02

然后我们使用命令,创建组件

ng g component components/header

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_03

组件内文件介绍

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_04

其中,header.component.ts 文件中,selector 表示此组件的名称。

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_05

组件的使用

 编写组件HTML - header.component.html

<h2>这是一个头文件</h2>

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_06

在 app.component.html 文件中使用header组件

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>

<app-header></app-header>

<router-outlet></router-outlet>

   Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_07

angular4.x 绑定数据

绑定文本

 首先我们编写 header组件的 ts 文件

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

/**属性写在这里 */
title = "hello world"

msg:any; /**另一种定义属性的方法 */


constructor() { } /**构造函数 */

ngOnInit() { /**生命周期函数 */

this.msg = "你好 世界"

}

}

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_08

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_09

 再来编写 header 组件的html文件,实现数据绑定。

<h2>这是一个头文件</h2>

<h1>{{title}}</h1>

<h2>{{msg}}</h2>

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_10

 为了看起来更加简洁,我们将主文件的多余代码删除,只调用 header 组件。

<app-header></app-header>

效果如下

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_11

定义属性我们还可以给他加修饰符

// 定义属性可以给他加修饰符
public username = "wangjiawei"

声明属性的几种方法:

  • public:共有(默认)    ——可以在类里面使用,也可以在类外边使用
  • protected:保护类型   ——只有在当前类和他的子类里面可以使用
  • private:私有     ——只有在当前类才可以访问这个属性

定义属性的时候可以声明类型

public student: string = "wangjiawei"

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_12

 绑定属性

 ts 文件

/**绑定属性 */
id = "123"

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_13

html文件

<div id="{{id}}">看一下我的属性</div>

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_14

 

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_15

另一种绑定属性的方法

ts 文件不用变,html 文件属性名使用[]方括号括起来,绑定时不需要再加{{}}

<div [title]="msg">鼠标上去试一下</div>

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_16

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_17

绑定后台的HTML数据

使得HTML标签可以渲染在页面上。

ts 文件

/**绑定后台的html数据 */
public h ="<h2>这是后台请求回来的数据</h2>"

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_18

html 文件

<span [innerHtml]="h"></span>

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_19

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_20

绑定对象

ts 文件

/**对象 */
public obj = {
name:'张三'
}

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_21

html 文件

<span>{{obj.name}}</span>

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_22

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_23

数据循环  *ngFor

循环数据

 ts 文件

/**数据循环 */
public list=[]

constructor() { /**构造函数 */

this.list=['111','222','333','444','555'];

}

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_24

html 文件

<ul>
<!-- let 如同 var -->
<li *ngFor="let item of list">{{item}}</li>
</ul>

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_25

 

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_26

循环数据并获取索引值

ts 文件

/**数据循环 */
public list2:any[];

constructor() { /**构造函数 */

this.list2=['语文','数学','外语','计算机']

}

html 文件

<ul>
<!-- let 如同 var -->
<li *ngFor="let item of list2;let key=index">{{item}}----{{key}}</li>
</ul>

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_27

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_28

循环难度升级1

 ts 文件

public list3:any[];

constructor() { /**构造函数 */

this.list3=[
{'title':'11111111111'},
{'title':'22222222222'},
{'title':'33333333333'},
{'title':'44444444444'}
]

}

HTML 文件

<ul>
<!-- let 如同 var -->
<li *ngFor="let item of list3;let key=index">{{item.title}}----{{key}}</li>
</ul>

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_29

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_30

循环难度升级2

ts 文件

public list4: any[];

constructor() { /**构造函数 */

this.list4=[
{
'catename':'宝马',
"list":[
{'title':'宝马x1'},
{'title':'宝马x2'},
{'title':'宝马x3'},
{'title':'宝马x4'}
]
},
{
'catename':'奥迪',
"list":[
{'title':'奥迪q1'},
{'title':'奥迪q2'},
{'title':'奥迪q3'},
{'title':'奥迪q4'}
]
},
]

}

HTML 文件

<ul>
<!-- let 如同 var -->
<li *ngFor="let item of list4;let key=index">
{{item.catename}}----{{key}}
<ol>
<li *ngFor="let car of item.list">
{{car.title}}
</li>
</ol>

</li>
</ul>

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_31

   Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_32

事件

获取属性值

angular 中添加事件使用 () 括号创建。

ts 文件

// 自定义方法
getMsg(){
// 获取属性的值
alert(this.msg);
}

   Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_33

html 文件

<button (click)="getMsg()">执行方法</button>

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_34

   Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_35

改变属性值

 ts 文件

public username:any;

constructor() {

this.username = "王佳伟"

}
setName(){
// 改变属性的值
this.username="Jayvee Wong"
}

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_36

html 文件

{{username}}
<br>
<button (click)="setName()">改变username的值</button>

   Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_37

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_38  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_39

 判断语句 *ngIf

ts 文件

public flag: any;

constructor() {

this.flag = true;

}

   Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_40

html 文件

条件判断语句 <br>
<div *ngIf="flag">flag=true的情况下面显示</div>
<button (click)="flag=!flag">切换flag的值</button>

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_41

 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_42Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_43

表单处理

点击回车弹窗回车文字案例

 ts 文件

keyUp(e){  // e 为事件对象,需要在前端传入
// 键盘抬起
// console.log(e)
if(e.keyCode==13){
alert('回车')
}
}

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_44

html 文件

<input type="text" (keyup)="keyUp($event)">

   Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_45

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_46

双向数据绑定

   注意 :angular4.x中,使用双向数据绑定,首先得引入 FormsModule 模块。

引入 FormsModule 模块

 首先,在 app.module.ts 引入FormsModule模块

import { FormsModule } from '@angular/forms';

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_47

然后在下面的 import 中声明一下

imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],

   Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_48

然后就可以使用双向数据绑定了。

双向数据绑定的使用

 在输入框输入值,单击按钮,获取输入框的值然后弹窗弹出。

ts 文件

public search:any;

constructor() {

this.search='搜索的内容';

}

getSearch(){
alert(this.search)
}

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_49 Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_50

html 文件

双向数据绑定
<input type="text" [(ngModel)]="search">
{{search}}
<br>
<button (click)="getSearch()">获取输入框输入的值</button>

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_html_51

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_52

ToDoList 项目

创建新组件 todolist

在之前学习的项目基础上创建一个新的组件,叫 todolist 。

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_53

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_54

项目代码

html 文件

<input type="text" [(ngModel)]='username' (keydown)='addData($event)'>
<hr>

<h2>正在进行</h2>
<ul>
<li *ngFor="let item of list;let i = index;" [hidden]="item.status==2">
<button (click)="changeData(i)">改变数据</button> {{item.username}} --------- <button (click)="deleteData(i)">删除</button>
</li>
</ul>

<h2>已经完成</h2>
<ul>
<li *ngFor="let item of list;let i = index;" [hidden]="item.status==1">
<button (click)="changeData(i)">改变数据</button> {{item.username}} --------- <button (click)="deleteData(i)">删除</button>
</li>
</ul>

Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据绑定_55

ts 文件

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-todolist',
templateUrl: './todolist.component.html',
styleUrls: ['./todolist.component.css']
})
export class TodolistComponent implements OnInit {

public username: any;

public list = [];

constructor() {
this.username = '';
}

ngOnInit() {
}

addData(e) { // 添加数据
// alert(this.username)
if (e.keyCode == 13) { // 检测是否按回车
var obj = { /***每次增加的一个对象数据 */
username: this.username,
status: 1
}
this.list.push(obj)
this.username = ''
}
}

deleteData(key) { // 删除数据 传进索引值
this.list.splice(key, 1) /**删除数组的数据:从key索引开始删除,删除一个数据 */
}

changeData(key) { // 改变状态
this.list[key].status = 2
}

}

   Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_56

  Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定_数据_57

 

【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!

【重要说明】本文为本人的学习记录,论点和观点仅代表个人而不代表当时技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!

【Gitee地址】秦浩铖:​​https://gitee.com/wjw1014​​


举报

相关推荐

0 条评论