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

创建 angular 组件

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

　　

创建组件命令

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

在 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>