雨凡技术栈

创建组件及模板

一、创建组件

  • 创建组件 ng g component components/header
  • 使用组件 <app-home></app-home>

二、数据绑定

  /*
 声明属性的几种方式：
   public     共有 *(默认)    可以在这个类里面使用，也可以在类外面使用
   protected  保护类型        它只有在当前类和它的子类里面可以访问
   private    私有            只有在当前类才可以访问这个属性
 */
  // *定义数据
  public title = "我是新闻组件";
  msg = "我是一个新闻组件的msg";
  private username: string = '张三';
  public student: any = '我是一个学生的属性(数据)' // !推荐
1
2
3
4
5
6
7
8
9
10
11

1、数据文本绑定

  1. angular中使用{{}}绑定业务逻辑里面定义的数据
  <h2>{{title}}</h2>
1
  1. angular模板里面允许做简单的计算
  <p>1+2={{1+2}}</p>
1
  1. 模板里面绑定html
public content:any = '<h2>我是一个html标签，用[innerHtml]解析</h2>';
1
  <p [innerHtml]='content'></p>
1

2、绑定属性

public student: any = '我是一个学生的属性(数据)'
1
<p [title]="student">张三</p>
1

3、数据循环

//定义数组
  public arr: any[] = ['111', '222', '333'];
  public list: Array < string > = ['我是数组1', '我是数组2'];
  public userlist: any[] = [{
    username: '张三',
    age: 20
  }, {
    username: '李四',
    age: 20
  }, {
    username: '王五',
    age: 20
  }]
  public cars: any[] = [{
      cate: '宝马',
      list: [{
        title: '宝马x1',
        price: '30万'
      }, {
        title: '宝马x2',
        price: '40万'
      }, {
        title: '宝马x3',
        price: '50万'
      }]
    },
    {
      cate: '奥迪',
      list: [{
        title: '奥迪q1',
        price: '50万'
      }, {
        title: '奥迪q2',
        price: '60万'
      }, {
        title: '奥迪q3',
        price: '70万'
      }]
    }
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
  1. *ngFor 普通循环
<ul>
  <li *ngFor="let item of arr">{{item}}</li>
</ul>
1
2
3
  1. 循环的时候设置key
<ol>
  <li *ngFor="let item of list;let key=index">
    {{item}}---{{key}}
  </li>
</ol>
1
2
3
4
5
  1. template循环数据
  <ul>
  <li template="ngFor let item of list">
    {{item}}
  </li>
</ul>
1
2
3
4
5
  1. 循环数组对象
<ul>
  <li *ngFor="let item of userlist">
    <span>{{item.username}}</span>--<span>{{item.age}}</span>
  </li>
</ul>
1
2
3
4
5
  1. 嵌套循环
<ul>
  <li *ngFor="let item of cars">
    <h4>{{item.cate}}</h4>
    <ol>
      <li *ngFor="let car of item.list">
        {{car.title}}--{{car.price}}
      </li>
    </ol>
  </li>
</ul>
1
2
3
4
5
6
7
8
9
10

4、条件判断

ng里面的条件判断只有if，没有else

public flag:boolean=true;
public list:any[]=[{
  'title':'我是新闻1'
},{
  'title':'我是新闻2'
},{
  'title':'我是新闻3'
}]
1
2
3
4
5
6
7
8
<div *ngIf="flag">
  <img src="assets/images/favicon.png" alt="">
</div>
<div *ngIf="!flag">
  <img [src]="picUrl" alt="">
</div>
1
2
3
4
5
6
<ul>
  <li *ngFor="let item of list;let key=index">
    <span *ngIf="key==1" class="red">{{item.title}}---{{key}}</span> 
    <span *ngIf="key!=1">{{item.title}}---{{key}}</span> 
  </li>
</ul>
1
2
3
4
5
6

5、*ngSwitch

public orderStatus:number=1; // 1.表示已经支付  2.表示确认订单 3.已经发货
1
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">
  表示已经支付
</p>
<p *ngSwitchCase="2">
  表示确认订单
</p>
<p *ngSwitchCase="3">
  已经发货
</p>
<p *ngSwitchDefault>
  无效订单
</p>
</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5、[ngClass]、[ngStyle]

[ngClass]

<p class="red">ngClass提示(尽量不要用dom改变class)</p>
<p [ngClass]="{'orange':!flag,'blue':flag}">ngClass提示</p>
<em>循环数组，让数组的第一个元素的样式为red</em>
<li *ngFor="let item of list;let key=index" 
    [ngClass]="{'red': key==1,'orange':key==2}"
>{{key}}--{{item.title}}</li>
1
2
3
4
5
6

[ngStyle]

<p [ngStyle]="{'color': 'blue'}">我是一个p标签</p>
<p [ngStyle]="{'color': attr}">我是一个p标签</p>
1
2

6、管道

<p>{{tody | date:'yyyy-MM-dd HH:mm:ss'}}</p>
1

其他管道： http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34

7、执行事件

getDate() {
  alert(this.flag)
}
runEvent(e) {
  // console.log(e)
  //!定义变量要指定类型
  var dom:any = e.target;
  dom.style.color="red"
}
1
2
3
4
5
6
7
8
9
<button (click)="getDate()">执行事件获取数据</button>
<button (click)="runEvent($event)">执行方法获取事件对象</button>
1
2
键盘事件
  keyDown(e) {
    console.log('keydown事件')
    if(e.keyCode===13) {
      console.log('按了一下回车')
    }else {
      console.log(e.target.value)
    }
  }
  keyUp(e) {
    console.log('keyup事件')
    if(e.keyCode===13) {
      console.log(e.target.value)
      // console.log('按了一下回车')
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
keyDown
<input type="text" (keydown)="keyDown($event)">
keyUp
<input type="text" (keyup)="keyUp($event)">
1
2
3
4

8、双向数据绑定

注意引入：FormsModule

import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [ //配置当前项目运行的组件
    AppComponent, NewsComponent, HeaderComponent, HomeComponent, FormComponent, SearchComponent, TodoListComponent
  ],
  imports: [  //配置当前模块运行依赖的其他模块
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],  
  bootstrap: [AppComponent] 
})
export class AppModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input type="text" [(ngModel)]="keywords" />
{{keywords}}
1
2

← Angular 表单 →