Angular实战记录

当ngModel双向绑定非基本数据类型值时

子组件中ngModel绑定的值改变时，通过onChangeCallback 传回父组件时，有两种情况：

基本数据类型：string/number 等变量，父组件中会跟着变化
非基本数据类型：{}/[]/Date/... 父组件中不会检测到变化

解决方法：

创建一个新对象传回：

this.onChangeCallback(new Date(this.date));

(顺便完善父子组件间双向数据绑定的实现)

子组件ts：

import { Component,forwardRef} from '@angular/core';
import { ControlValueAccessor,NG_VALUE_ACCESSOR, DefaultValueAccessor } from '@angular/forms';

@Component({
  selector: 'iq-timepicker',
  templateUrl: 'timepicker.component.html',
  providers:[{
	provide:NG_VALUE_ACCESSOR,
	useExisting:forwardRef(()=>TimePickerComponent),
	multi:true
  }]
})
export class TimePickerComponent implements ControlValueAccessor{
  private date:Date;
  private onChangeCallback: Function = (_: any) => {};
  private onTouchedCallback: any = {};
  
  private triggerChange(){
	//此时子组件中 this.date 已变化
    let d = new Date(this.date);
    this.onChangeCallback(d);//变化传给父组件
  }
  ...

  writeValue(value: Date) {
    if(!value){
      this.date=new Date();
    }else{
      this.date = new Date(value);
    }
  }
  registerOnChange(fn) {
    this.onChangeCallback = fn;
  }
  registerOnTouched(fn) {
    this.onTouchedCallback = fn;
  }

父组件html中使用：

<iq-timepicker [(ngModel)]="timeVariable"></iq-timepicker>

父组件向子组件传值

方式：

属性输入 @Input()
双向绑定 writevalue

注意：

传入顺序，先Input后writevalue

两者当传值为非基本数据类型时，都无法监测改变

Input方式：@Input() set 方法或者 ngOnChanges，都无法监测改变。像这样：

  //子组件
  import { Component, OnInit, Input, OnChanges,SimpleChanges } from '@angular/core';

  @Component({
      selector: "NB-new-list",
      templateUrl: '...',
      styleUrls: ['...']
  })
  export class NBNewListComponent implements OnInit,OnChanges {

  	@Input() currency;//币种(此时是基本数据类型)
  	ngOnChanges(changes: SimpleChanges){
          if(changes["currency"]){//币种 变化
  			//变化前的值：changes["currency"].previousValue
  			//变化后的值：changes["currency"].currentValue
              ...
          }
      }
  }

解决方法：

可在生命周期ngDoCheck中监测变化：

  //子组件
  import { Component, OnInit, Input, DoCheck } from '@angular/core';

  @Component({
      selector: "NB-new-list",
      templateUrl: '...',
      styleUrls: ['...']
  })
  export class NBNewListComponent implements OnInit {
  	
  	beforeList;//暂存上一个清单数据
  	@Input() purchaseData=[];//清单数组(此时是非基本数据类型)
  	ngDoCheck(){
          if (JSON.stringify(this.purchaseData) != JSON.stringify(this.beforeList)) {//当清单变化
  			this.beforeList = JSON.parse(JSON.stringify(this.purchaseData));
  			...
  		}
      }
  }

注意：

在ngDoCheck中进行input传入值的前后比较时，如果是比较长的对象或数组，建议把上一个值保存为字符串，否则有些变化无法检测到

形如：

ngDoCheck() {
	if (JSON.stringify(this.purchaseData) != this.beforeListStr){//采购清单 变化
		this.beforeListStr = JSON.stringify(this.purchaseData);
	}
}

某些有用的生命周期

ngDoCheck：可监测每次input传参对象改变，例子如上
ngAfterViewChecked：每次完成界面渲染

使页面强制刷新

如同AngularJS中的$apply()

使用如下：

import { ChangeDetectorRef} from '@angular/core';

@Component({
	   selector: "...",
	   templateUrl: '...',
	   styleUrls: ['...']
})
export class ..Component implements OnInit {
		
	constructor(private changeDetectorRef:ChangeDetectorRef) {
    }

    Fun(){
    	this.changeDetectorRef.detectChanges();//需要强制刷新
    }
}

当select下拉选项变化时

有种情况，在同一个页面，其他操作导致select的下拉选项发生变化，不刷新页面。

此时需要重置已选的项：

已选的项没有删除，保持选中状态
已选的项删除，则置为”请选择”

实现难点：

当获取新的下拉列表时，需强制刷新界面;
当判断已选的项目回来时，不仅需要设置双向绑定的值val，还要重置 select对象的已选index和显示text

html：

<tr *ngFor="let item of procurementList;index as i">
    <td>
        <select [(ngModel)]="item.MaterialSource" id="materialSource{{i}}" name="materialSource{{i}}" ngModel required>
            <option value=''>请选择</option>
            <option *ngFor="let em of contractList" [ngValue]="em.id">{{em.value}}</option>
        </select>
    </td>
</tr>

ts:

import { Component, OnInit, DoCheck,ChangeDetectorRef} from '@angular/core';
declare var $:any;

@Component({
       selector: "...",
       templateUrl: '...',
       styleUrls: ['...']
})
export class ..Component implements OnInit {

procurementList;
contractList;//合同列表（下拉列表数据）结构为{"id":"","value":""}...

constructor(private changeDetectorRef:ChangeDetectorRef) {
}

ngDoCheck(){
    if (JSON.stringify(this.contractList) != window.localStorage.getItem("contractList")) {//合同列表变化
        this.contractList = JSON.parse(window.localStorage.getItem("contractList"));
        this.changeDetectorRef.detectChanges();//需要强制刷新
        for(let i=0,len=this.procurementList.length;i<len;i++){
            //重新检查设置已选
            let pro=this.procurementList[i];
            let list=this.OnlyIdContract(pro["MaterialSource"]);
            if(!list){
                pro["MaterialSource"]="";//为请选择
            }else{
                pro["MaterialSource"]=list["em"]["id"];//val
                $("#materialSource"+i)[0].selectedIndex = list["index"]+1; //index
                $("#materialSource"+i)[0].text=list["em"]["value"]; //text
            }
        }
    }
}
OnlyIdContract(id){//根据合同唯一(id)标识 匹配合同项
    let list={
        em:"",//匹配下拉的项
        index:""//匹配已选在现有列表中的index
    }
    let item;
    for(let i=0,len=this.contractList.length;i<len;i++){
        item=this.contractList[i];
        if(item.id==id){
            list.em=item;
            list.index=i;
            return list;
        }
    }
    return "";//已选的已经不在合同列表中 则置空
	}
}

用ngModel绑定radio单选框

当从页面上input的value="true"/"false"获取的值是字符串，此时不能直接做布尔计算，需要函数进行下转化。

html:

<span>是否直接写入ERP</span>
<label>
    <input type="radio" name="directly" [(ngModel)]="saveData.istoerp" #directly="ngModel" value="true" (onClick)="directlyChange($event)">
                是
 </label>
 <label>
      <input type="radio" name="directly" [(ngModel)]="saveData.istoerp" #directly="ngModel" value="false" (onClick)="directlyChange($event)">
                否
 </label>

ts:

directlyChange(e) {//是否写入ERP变化
    if(String(e)=="true"){
        this.saveData.istoerp=Boolean(1);
    }else{
        this.saveData.istoerp=Boolean(0);
    }
}

posted @ 2018-01-26 21:16 soloDancer_讠阅读(253) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

soloDancer_讠