Angular数据绑定、响应式编程、管道

数据绑定

1.事件绑定

函数调用：事件绑定
属性赋值：
example：
1.1创建项目
–> ng new demo1
1.2生成组件
–> ng g component bind
1.3
bind.component.html

<p>
  bind works!
</p>
<button (click)="doOnClick($event)">点我</button>

bind.component.ts

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

@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
  doOnClick(event: any) {
    console.log(event);
  }
}

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<app-bind></app-bind>

1.4运行
点击按钮，查看控制台
效果图
–> npm run start

属性绑定：
bind.component.html

<p>
  bind works!
</p>
<!--事件绑定-->
<button (click)="doOnClick($event)">点我</button><br>
<!--属性绑定-->
<img [src]="imgUrl"/>
<!--属性绑定：插值表达式-->
<img src="{{imgUrl}}"/>

bind.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
  imgUrl: string
  imgUrl = 'http://placehold.it/400x220';
  constructor() { }
  ngOnInit() {
  }
  doOnClick(event: any) {
    console.log(event);
  }
}

效果图

2.Dom属性绑定

bind.component.html

<p>
  bind works!
</p>
<!--事件绑定-->
<button (click)="doOnClick($event)">点我</button><br>
<!--属性绑定-->
<img [src]="imgUrl"/>
<!--Dom属性绑定：插值表达式-->
<img src="{{imgUrl}}"/>
<!--html与Dom绑定的区别-->
<!--浏览器在渲染字符串时，创建相应的Dom节点-->
<input value="Tom" (input)="doOnInput($event)">
==4.双向绑定==

bind.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
  imgUrl: string
  imgUrl = 'http://placehold.it/400x220';
  constructor() { }

  ngOnInit() {
  }
  doOnClick(event: any) {
    console.log(event);
  }
  doOnInput(event: any) {
    /*打印dom属性，改变*/
    console.log('Dom:' + event.target.value);
    /*打印html属性，不变*/
    console.log('Html:' + event.target.getAttribute('value'));
  }
}

效果图
注：
<button disabled=’“false”>
禁用：通过html属性修改true，false无效
只能通过dom属性修改true，false

扫描二维码关注公众号，回复： 4770083 查看本文章

3.html属性

在这里插入图片描述

优先使用Dom绑定
错误示范example：
td元素没有colspanDom属性

<table>
  <tr>
    <td colspan="{{1+1}}">慕课网</td>
  </tr>
</table>

运行：
console
正确示范example：
bind.component.html

<!--html绑定-->
<table>
  <tr>
    <td [attr.colspan]="size">慕课网</td>
  </tr>
</table>

bind.component.ts

size = 2;

console
在这里插入图片描述

.a {
  background: yellow;
}
.b {
  color: red;
}
.c {
  font-size: 60px;
}

<div class="a b c">慕课网</div>

效果图
1

  divClass: string;
  constructor() {
    setTimeout(() => {
      this.divClass = 'a b c';
    }, 3000);
  }

<div [class]="divClass">慕课网</div>

  isBig: boolean;
  constructor() {
    setTimeout(() => {
      this.isBig = true;
    }, 3000);
  }

<div class="a b" [class.c]="isBig">慕课网</div>

divAllClass: any = {
    a: false,
    b: false,
    c: false
  }
  constructor() {
    setTimeout(() => {
      this.divAllClass = {
        a: true,
        b: true,
        c: true
      };
    }, 3000);
  }

<div [ngClass]="divAllClass">慕课网</div>

在这里插入图片描述
1

  isDev = true;
  constructor() {
    setTimeout(() => {
      this.isDev = false;
    }, 3000);
  }

1.1

<div [ngClass]="divAllClass">慕课网</div>

1.2

<div [style.font-size.em]="isDev?3:1">慕课网</div>

  divAllStyle: any = {
    color: 'red',
    background: 'yellow'
  }
  constructor() {
    setTimeout(() => {
      this.divAllStyle = {
        color: 'yellow',
        background: 'red'
      };
    }, 3000);
  }

<div [ngStyle]="divAllStyle">慕课网</div>

4.双向绑定

  name: string;
  constructor() {
    setInterval(() => {
      this.name = 'Tom';
    }, 3000);
  }

1

<input [value]="name" (input)="doOnInput($event)">{{name}}

2
在文件 app.component.ts 中引入ngModel
注：不引入就使用报错
Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BindComponent } from './bind/bind.component';
import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    BindComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<input [(ngModel)]="name">{{name}}

效果图

响应式编程

管道

  birthday = new Date();

1 无管道

 <p>我的生日是：{{birthday}}</p>

效果图
2 管道：| uppercase

 <p>我的生日是：{{birthday | date | uppercase}}</p>

在这里插入图片描述
3 管道：| date: 'yyyy-MM-dd HH:mm:ss'

<p>我的生日是：{{birthday | date: 'yyyy-MM-dd HH:mm:ss' | uppercase}}</p>

在这里插入图片描述

pai = 3.1415926;

4 无管道

<p>圆周率是：{{pai}}</p>

在这里插入图片描述
5 管道：| number: '2.2-2' 整数位.小数最少-小数最多

<p>圆周率是：{{pai | number: '2.2-2'}}</p>

在这里插入图片描述自定义管道
1.生成管道
–> ng g pipe pipe/multiple
2.multiple.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'multiple'
})
export class MultiplePipe implements PipeTransform {
  transform(value: number, args?: number): any {
    if (!args) {
      args = 1;
    }
    return value * args;
  }
}

size = 7;

<p>自定义管道：{{size | multiple}}</p>
<p>自定义管道：{{size | multiple: '2'}}</p>

在这里插入图片描述