[angular4.x 快速上手]

一、修饰符作用范围

public 公有（不写修饰符，默认就是public） 可以在这个类里面也可以在类外面使用；
protected 受保护类型 只有在当前类和它的子类中可以访问；
private 私有类型 只有当前类才可以访问这个属性。

二、绑定数据

1. 数据文本绑定 {{}}

ts文件中

export class AppComponent {
  title = 'Hello Angular6.x';
}

html文件中

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

效果图

data_binding01.jpg

2.绑定 html

ts文件中

this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"

html文件中，标签中的属性使用 “[]” 中括号包裹，而访问 ts 文件中的属性 不再使用 “{}” 花括号，而是 “” 双引号或者 ‘’ 单引号包裹。

<div [innerHTML]="h"></div>

效果图

data_binding02.jpg

三、 数据循环 *ngFor

1、*ngFor 普通循环

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

2、循环的时候设置 key

<ul> 
  <li *ngFor="let item of list;let i = index;"> 
     {{item}} --{{i}} 
  </li> </ul>

3、template 循环数据

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

四、条件判断 *ngIf

1、使用 *ngIf

<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>

2、使用 template

<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>

五、执行事件 (click)=”getData()”

  <button class="button" (click)="getData()"> 
      点击按钮触发事件 
  </button> 
 
   
  <button class="button" (click)="setData()"> 
      点击按钮设置数据 
  </button>

  getData(){ /*自定义方法获取数据*/ 
    //获取 
    alert(this.msg); 
 

  } 
  setData(){ 
      //设置值 
    this.msg='这是设置的值'; 
  }

六、绑定属性

<div [id]="id" [title]="msg">调试工具看看我的属性</div>

七、表单处理

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

keyUpFn(e){ 
      console.log(e) 
  }

八、双向数据绑定

注意引入：在 app.module.ts 文件中 FormsModule

image.png

使用

<input type="text"  [(ngModel)]="inputValue"/> 
 
  {{inputValue}}

作者：SEVEN_PIG
链接：https://www.jianshu.com/p/ee1eab8d2382