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

创建 angular 组件

创建组件命令

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

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

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

ng g component components/header

组件内文件介绍

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

组件的使用

编写组件HTML - header.component.html

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

在 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 绑定数据

绑定文本

首先我们编写 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 = "你好 世界"

  }

}

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

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

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

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

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

<app-header></app-header>

效果如下

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

  // 定义属性可以给他加修饰符

  public username = "wangjiawei"

声明属性的几种方法：

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

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

public student: string = "wangjiawei"

绑定属性

ts 文件

  /**绑定属性 */

  id = "123"

html文件

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

另一种绑定属性的方法

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

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

绑定后台的HTML数据

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

ts 文件

  /**绑定后台的html数据 */

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

html 文件

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

绑定对象

ts 文件

  /**对象 */

  public obj = {

    name:'张三'

  }

html 文件

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

数据循环 *ngFor

循环数据

ts 文件

 /**数据循环 */

  public list=[]

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

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

   }

html 文件

<ul>

    <!-- let 如同 var -->

    <li *ngFor="let item of list">{{item}}</li>

</ul>

循环数据并获取索引值

ts 文件

/**数据循环 */

  public list2:any[];

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

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

   }

html 文件

<ul>

  <!-- let 如同 var -->

  <li *ngFor="let item of list2;let key=index">{{item}}----{{key}}</li>

</ul>

循环难度升级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>

循环难度升级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>

事件

获取属性值

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

ts 文件

  // 自定义方法

  getMsg(){

    // 获取属性的值

    alert(this.msg);

  }

html 文件

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

改变属性值

ts 文件

  public username:any;

  constructor() {

    this.username = "王佳伟"

   }

    setName(){

        // 改变属性的值

        this.username="Jayvee Wong"

    }

html 文件

{{username}}

<br>

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

判断语句 *ngIf

ts 文件

public flag: any;

constructor() {

   this.flag = true;

}

html 文件

条件判断语句 <br>

<div *ngIf="flag">flag=true的情况下面显示</div>

<button (click)="flag=!flag">切换flag的值</button>

表单处理

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

ts 文件

keyUp(e){  // e 为事件对象，需要在前端传入

    // 键盘抬起

    // console.log(e)

    if(e.keyCode==13){

      alert('回车')

    }

  }

html 文件

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

双向数据绑定

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

引入 FormsModule 模块

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

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

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

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule

  ],

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

双向数据绑定的使用

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

ts 文件

public search:any;

  constructor() {

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

  }

getSearch(){

    alert(this.search)

}

html 文件

双向数据绑定

<input type="text" [(ngModel)]="search">

{{search}}

<br>

<button (click)="getSearch()">获取输入框输入的值</button>

ToDoList 项目

创建新组件 todolist

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

项目代码

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>

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

  }

}