angular 学习笔记

1.tslint 设置 代码风格  在'./tslint.json’中找到要修改的配置文件，将其添加到‘src/tslint.json’文件中（或者直接在‘./tslint.json’中修改）

2.绑定数据类型： 分为插值表达式 {{}}  属性绑定 [herf]="url" 事件绑定(click)="add($event)"。

3. 双向数据绑定： [(ngModel)]="{{xxx}}"

4 属性型指令 

类
[ngClass]="classList"  //通过布尔值控制，同时操作多个class类
classList{
    redColor:true,
    fz:false
}

.redColor{
    fontSize:16px;
}
.fz{    color:red;
}

[class.test]="isTest" //添加或者移除一个类 
isTest = "true"
.test{
    color:red;
}


内嵌样式
[ngStyle]="styleList"
styleList={
    color:red,
    fontSize:16px
}
[style.fontSize]="fz"
fz=60px

*ngIf  [class.hidden] 隐藏元素区别 前者删除dom元素，后者通过css display 隐藏，页面可见相应dom元素


*ngFor="let item of colors ; let i=index ; let odd=odd"
*ngFor循环会提供出一个index 但是index不能直接用，要赋值一个变量才可以用
ngFor循环默认得到odd 奇数， 当index值为奇数时，odd 为false
*ngFor 指令添加trackBy 提升渲染性能：
当被循环的是一个对象时需要添加 不加的话 当某一项key value 变化的话所有dom元素会全部渲染
当循环的是数组的话，不需要加trackBy，只有被修改的Item 会被重新渲染，其他元素不重新渲染
*ngFor="let item of colors ; let i=index; let trackBy="trackById"
 trackById(index,item){
    return item.id
}
 colors={    color:red,
    fontSize:16px
}

todos 案例学习

任务展示 *ngFor  trackBy

添加功能 [(ngModel)]   需要做非空判断  导入FormMoulde 模块

删除功能   给文本框添加事件 使用filter 过滤删除 相应项

状态切换  添加点击事件 -- 获取 id ---find 找到相应的项 对其状态字段取反

angular 数据改变视图会自动更新

todos 案例升级

1） 对功能进行拆分 组件化

2）父组件传数据给子组件

父  skill="parentData"  传递一个字符串  [skill]="parentData" //传入一个动态的数据  
子  import Input  
    @input() skill  装饰器公开接收父组件传递给子组件的属性
    html 模板中应用 

3）子组件给父组件传递数据

子 import Output  EventEmitter from angular/core
    @Output() getMoney = new EventEmitter()
    当点击事件触发的时候 
    this.getMoney.emit("孩子传递数据给父亲")
父 html 子组件调用位置  (getMoney) = setMoney($event)
    Js setMoney(data){
        console.log(data)            
        }