How to define your own select component based on ng-alain in angular?-JS Tutorial-php.cn

How to define your own select component based on ng-alain in angular?

亚连

Release： 2018-06-05 09:36:56

Original

3161 people have browsed it

This article mainly introduces the example of angular defining its own select component based on ng-alain. Now I share it with you and give it as a reference.

1. The first is the my-select2.component.html page, where new functions are added based on business needs based on ng-alain's select; the code is as follows:

<nz-select #select style="width:100%;" [(ngModel)]="selectedOption" [nzPlaceHolder]="myPlaceHolder" nzAllowClear [nzShowSearch]="true" [nzNotFoundContent]="&#39;无匹配&#39;">
  <nz-option
    *ngFor="let option of options"
    [nzLabel]="option.label"
    [nzValue]="option"
    [nzDisabled]="option.disabled">
  </nz-option>
</nz-select>

Copy after login

2. Furthermore, it is the my-select2.component.ts page. There are comments in the code; the code is as follows:

import { ControlValueAccessor } from &#39;@angular/forms/src/directives&#39;;
import { Component, forwardRef, Input,OnInit,ElementRef,Output,EventEmitter} from &#39;@angular/core&#39;;
import { NG_VALUE_ACCESSOR } from &#39;@angular/forms&#39;;
import { Router, NavigationEnd } from &#39;@angular/router&#39;;
import { FormGroup, FormBuilder, Validators } from &#39;@angular/forms&#39;;
import { SelectService } from &#39;./my-select2.service&#39;;
declare var $: any;
@Component({
 selector: &#39;nz-select2&#39;,
 templateUrl: &#39;./my-select2.component.html&#39;,
 providers: [ 
     {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NzSelect2Component),//注入表单控件
      multi: true
     }]
})
export class NzSelect2Component implements OnInit{
  constructor(private selectService:SelectService) { 
  }
 innerValue: any = &#39;&#39;; 
 //监听绑定的值，与外岑的ngModel相互绑定
 set selectedOption(val:any){
   if (val !== this.innerValue) {
      this.innerValue = val;
      this.onChangeCallback(val.value);
      this.dataBack.emit(val.value); // 事件
    }
 }
 get selectedOption():any{
    return this.innerValue;
 }
 options = [];//接收select的数组
  _dataSource:any;//接收本地的自定义数组或者请求返回的数组
 @Input()
 url:any;//请求的url
 @Input()
 myPlaceHolder:any;//自定义的PlaceHolder
 @Input()
 //下拉框的数据格式
  fieldKey:any = {
    text: &#39;text&#39;,
     value: &#39;value&#39;
  };
 @Input()
  set dataSource(val: any) {
    this._dataSource = val;
    if ($.isArray(this._dataSource)) {   
    this.options=this._dataTransform(this._dataSource);//如果是本地数组或直接请求的数组直接复制
    }
  }
  get dataSource(): any {
    return this._dataSource;
  }
 @Output() dataBack = new EventEmitter<any>();
 registerOnChange(fn: (value: any) => void) { 
   this.onChangeCallback = fn;
 }
 registerOnTouched(fn: any) {
   this.onTouchedCallback = fn;
 }
  writeValue(value: string) {

  }
 onChangeCallback = (value: any) => {};
 onTouchedCallback = (value: any) => {};
 ngOnInit() {
     //如果url存在则直接请求
    if(this.url){
      this.selectService.getValue(this.url).subscribe(data => { 
        data = data.rows || data.data;    
        this.options=this._dataTransform(data);
      });
    }   
 }
 //转换下拉框下的字段
  _dataTransform(data: Array<any>){
    let _data = [];
    for (let i = 0; i < data.length; i++) {
     _data[i] = {};
     _data[i].label = data[i][this.fieldKey.text];
     _data[i].value = data[i][this.fieldKey.value];
    }
    return _data;
 }
}

Copy after login

3. Then there is the my-select2.service.ts page, which mainly requests the drop-down array returned by the background interface. The url is the link passed by the parent component. The code is as follows:

import { Injectable } from &#39;@angular/core&#39;;
import { Headers, Http, URLSearchParams,RequestOptions } from &#39;@angular/http&#39;;
import { HttpClient, HttpErrorResponse } from &#39;@angular/common/http&#39;;
import &#39;rxjs/add/operator/toPromise&#39;;
// import { environment } from &#39;../../environments/environment&#39;;
@Injectable()
export class SelectService {
  constructor(private http: HttpClient) {}
  getValue(url: any):any{
    return this.http
      .get(url);
   
  }
}

Copy after login

4. Then comes the myselect.module.ts page. Here, the prerequisite for using this component is to introduce import { NzSelectModule } from 'ng-zorro-antd', the code is as follows ：

import { NgModule, ModuleWithProviders }    from &#39;@angular/core&#39;;
import { CommonModule }  from &#39;@angular/common&#39;;
import { FormsModule,ReactiveFormsModule } from &#39;@angular/forms&#39;;
import { NzSelect2Component } from &#39;./my-select2.component&#39;;
import { SelectService } from &#39;./my-select2.service&#39;;
import { NzSelectModule } from &#39;ng-zorro-antd&#39;;
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NzSelectModule,
    ReactiveFormsModule
  ],
  exports:[
    NzSelect2Component
  ],
  declarations: [
    NzSelect2Component
  ],
  providers: [
     SelectService
  ]
}) 

export class MySelectModule {
  constructor() {

  }
}

Copy after login

5. To use, import the module you need: MySelectModule

import { MySelectModule } from &#39;bizapp/base/components/myselect/myselect.module&#39;;

Copy after login

6. How to call: url is the interface for requesting the background, and fieldKey is the format of the array. The fields here can be defined according to the format returned by the background. For example: the background return format is [{dmsm1:5,dmz: 5}]Then the definition of fieldKey is as follows. myPlaceHolder is the content displayed during initialization. If it is a local array, you only need to add [dataSource]="peer", where peer is the local array

<nz-select2  [url]="&#39;analysis/api/data/code/list/030107&#39;" [(ngModel)]="search2.hpzl" [fieldKey]="{text:&#39;dmsm1&#39;,value:&#39;dmz&#39;}" [myPlaceHolder]="&#39;号牌种类&#39;"></nz-select2>

Copy after login

7, Summary: Through this component, we only need to modify the url and fieldKey to introduce and use it in any module, reducing the use of code and facilitating maintenance

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future .

Detailed interpretation of Node timer knowledge

Detailed analysis of the Generator function in Es6

Use the Array filter() method to compress sparse arrays in JavaScript

The above is the detailed content of How to define your own select component based on ng-alain in angular?. For more information, please follow other related articles on the PHP Chinese website!