angular学习-2

angular学习的第二课

一. 理解数据的双向绑定
在*.component.ts中

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

@Component({
    selector: 'app-stock-item',
    templateUrl: './stock-item.component.html',
    styleUrls: ['./stock-item.component.scss']
})
/** 在 export class StockItemComponent implements OnInit中
*   实现Angular的OnInit接口，这个接口允许我们在组件被初始化的时候进行一些处理
*/
export class StockItemComponent implements OnInit {
    // 定义几个字段都能在html里访问到
    public name:string;
    public code:string;
    public price:number;
    public previousPrice:number;
    public previousChange:boolean;
    constructor() { }
    // 函数ngOnInit会在组件初始化的时候触发
    ngOnInit(): void {
        //初始化每个字段
        this.name='a111';
        this.code='Tsc';
        this.price=85;
        this.previousPrice=80;
        this.previousChange= this.price>=this.previousPrice
    }
}

在html结构中 当previousChange为ture的时候class就会修改页面的三元判断就会执行

<style>
    .red{
        color: red;        
    }
    .yellow{
        color: yellow;
    }
</style>
<div><span [class]="previousChange?'red':'yellow'">我的颜色</span>{{name}}{{code}}{{price}}</div>

点击事件的绑定页面中

<style>
    .red{
        color: red;        
    }
    .yellow{
        color: yellow;
    }
</style>
<!--这里要注意如果没传参得这样changeColor()和vue有区别-->
<!--有时候我们也许用到需要知道点击事件这个dom节点问题我们就使用`$event`来解决-->
<div (click)="changeOver($event)">按钮</div>
<div><span [class]="previousChange?'red':'yellow'" (click)="changeColor(1)">我的颜色</span>{{name}}{{code}}{{price}}</div>

ts文件中

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

@Component({
    selector: 'app-stock-item',
    templateUrl: './stock-item.component.html',
    styleUrls: ['./stock-item.component.scss']
})
/** 在 export class StockItemComponent implements OnInit中
*   实现Angular的OnInit接口，这个接口允许我们在组件被初始化的时候进行一些处理
*/
export class StockItemComponent implements OnInit {
    // 定义几个字段都能在html里访问到
    public name:string;
    public code:string;
    public price:number;
    public previousPrice:number;
    public previousChange:boolean;
    constructor() { }
    // 函数ngOnInit会在组件初始化的时候触发
    ngOnInit(): void {
        //初始化每个字段
        this.name='a111';
        this.code='Tsc';
        this.price=85;
        this.previousPrice=80;
        this.previousChange= this.price>=this.previousPrice
    }
    changeOver(e){
        console.log(e)        
    }   
    changeColor(e){
        alert(e)
        this.previousChange=!this.previousChange
    }
}

二. 使用模型让代码更加清晰，
我们在ts中我们要做的是定义一个接口或一个类在我们的应用程序中始终如一的使用它，我们要在数据之外存放额外的逻辑，所以可以用类来定义
用cli命令快速创建一个类

ng generate class model/stock

在model文件夹下面建立个stock.ts的文件

export class Stock{
    
}

我们需要在里面写入东西

export class Stock {
  favorite:boolean=false;
  //这里是个ts的语法糖,我们没真正的为类的属性定义name,code等变量
  constructor(public name:string,public code:string,public price:number,public previousPrice:number){}
  previousChange():boolean{
    return  this.price>=this.previousPrice
  }
}

拓展下关于constructor()怕忘了

let a={a:0}
console.log(a.constructor()) //{}
console.log(a.constructor(a)) //{a:0}

三. 内置属性和内置条件是有区别的
接下来说ng里的两个内置属性NgClass和NgStyle
在上面说的样式中说了两个class的判断如果多个判断或者要给多个样式怎么办呢

export class StockItemsComponent implements OnInit {
  public stockTwo:StockTwo
  public stockClass
  constructor() { }
  ngOnInit(): void {
    this.stockTwo=new StockTwo(66,)
    this.stockClass={
      "yellow":this.stockTwo.num>this.stockTwo.number,
      "red":this.stockTwo.number==this.stockTwo.num,
      "blue":this.stockTwo.number>this.stockTwo.num,
      "border":this.stockTwo.state,
      "maxSize":this.stockTwo.state&&this.stockTwo.ifChange(),
      "minSize":!this.stockTwo.state&&!this.stockTwo.ifChange()
    }
  }
  changeNumber(e){
    console.log(this.stockTwo.number,this.stockTwo.num)
    if (e){
      this.stockTwo.number=this.stockTwo.number+1
    }else{
      this.stockTwo.number=this.stockTwo.number-1
    }
    this.stockClass={
      "yellow":this.stockTwo.num>this.stockTwo.number,
      "red":this.stockTwo.number==this.stockTwo.num,
      "blue":this.stockTwo.number>this.stockTwo.num,
      "border":this.stockTwo.state,
      "maxSize":this.stockTwo.state&&this.stockTwo.ifChange(),
      "minSize":!this.stockTwo.state&&!this.stockTwo.ifChange()
    }
  }
}

我们再在stockTwo里写上

export class StockTwo {
  number:number=66;
  constructor(public num:Number=66,public state:boolean=true ) {}
  ifChange(){
    return this.num==this.number
  }
}

而在结构中写入

<p [class.yellow]="stockTwo.state" [class.maxSize]="this.stockTwo.ifChange()">stock-items works!</p>
<div [ngClass]="stockClass">
  这是实验的块级
</div>
<button (click)="changeNumber(true)">+</button>
<button (click)="changeNumber(false)">-</button>

四.ng里面的内置结构指令
ngStyle不太想写了因为和ngClass没什么区别只是把class名字换成了样式名字，然后把里面的true：false改为样式的值
ng的if判断*ngIf="条件"和vif一样

<div *ngif="1==2">这个就不显示了</div>

<div v-if="1==2">这个就不显示了</div>

ng的for循环是*ngFor="let item of stocks;index as i"

index 引用到当前元素的index as是给他赋给i这个变量和sql查询语句差不多

even index为偶数时候为true

odd index为奇数的时候为true

first 第一个为true

last 倒数第一个为true

一般循环遍历经常使用的场景就是后端接口数据渲染，默认情况下会给每个对象以id去跟踪去删除，新增，添加修改。也就是说
只要对象引入没有变化angualr就不会给他创建新的元素，并重用旧的元素引用，这主要是出于性能方面的考虑，创建和删除的代价比较高
在ng循环里有trackBy函数函数返回值会作为他的标识符而不是object reference作为标识（在必须要删除元素的时候使用可以优化列表速度）
在.ts文件中写入方法

link

trackStockByCode(index,stock){
    return stock.code
}

在.html 里写入

<div *ngFor="let item of listData;index as i;even as isEven;trackBy:trackStockByCode" [class]="isEven?'red':'yellow'">
  {{item.name}}--- <span (click)="onListRow($event,i)">{{i+1}}</span>
</div>

还有一种判断方式[ngSwitch]='a.type'这也是种判断方式他本身不属于结构指令，他属于属性指令，ngSwitchCase,和ngSwitchDefault才是真的结构指令

<div [ngSwitch]="item.type">
    <stock-item *ngSwitchCase="'1'" [item]="item"></stock-item>
    <stock-item1 *ngSwitchCase="'2'" [item]="item"></stock-item1>
    <stock-item2 *ngSwitchCase="'3'" [item]="item"></stock-item2>
    <stock-itemNo *ngSwitchDefailt ></stock-itemNo>    
</div>

当你有多个组件的时候，用他很好用当type等于1的时候显示什么组件2的时候显示什么组件

赏

×

写着玩做笔记

小编不易来个几毛也是钱

打开支付宝扫一扫，即可进行扫码打赏哦