第四章 进阶

双向数据绑定

1-1 app.module.ts中配置

//1.在app.module.ts根目录中导入并注册
import {FormsModule} from '@angular/forms'
@NgModule({
 ...
  imports: [
    ...
    FormsModule    //注册
  ],
 ...
})

在组件中使用

//.component.ts
 export class HeaderComponent implements OnInit {
  public msg:string='hello world';
    ...
  }
}
//.html
<input type="text" [(ngModel)]="msg">       // [(ngModel)]="msg"   快捷键ng就可以出来

.(change)和(ngModelChange)

最好使用ngmodelChange

1 （change）

//.html
<input type="text" [(ngModel)]="msg" (change)="handleChange($event)">
//.ts
handleChange(e){
    console.log(e.target)
  }

2 (ngModelChange)

只要那个modelChange中的内容改变时就会触发

(ngModelChange)要放在[(ngModel)]后面

//.html  
<input type="text" [(ngModel)]="msg" (ngModelChange)="handleChange()">
//.ts
handleChange(){
    console.log(1)
  }

导入数据到本地

1在组件下面新建一个data.ts文件，将数据放进去

var cartList:object[]=  (数据)
export default cartList;    //导出一下

2在要使用数据的组件的ts文件中导入data.ts

import { Component, OnInit } from '@angular/core';
import cartList from './data';    //导入
...
export class HeaderComponent implements OnInit {
  public msg:string='hello world';
  public checked:boolean=true;
  public cartList:any=cartList;      //定义数据类型
  constructor() {
    console.log(cartList)   //可以打印看一下有没有
   }
  ...
}

3 html页面中使用

<div *ngFor="let item of cartList">
  {{item.productName}}
</div>

泛型

泛型：任意类型

 class Person<T>{
    emit(msg:T){
        console.log(msg);
    }
}
var p=new Person<string>();
p.emit("msg")

//通俗理解:泛型就是解决泛类，接口，方法的复用性。以及对不特定数据类型的支持
// function getData(value:any){
//     console.log(value)
// }
//局限性  只能传入特定的类型
//any 放弃了类型检查
//既然有类型检查，又想传想传什么就传什么
//任意类型：任意，类型检查
function getData<T>(value:T){
    console.log(value)
}
getData<string>("hello")
getData<number>(113);

装饰器

// 装饰器  在不修改类的前提下对类的拓展
function addName(target:any){
    target.prototype.name = "cheng"
}
@addName
class Person{
    getData(){
        console.log("hello world")
    }
}
var p:any= new Person();
console.log(p.name);