Comment définir votre propre composant de sélection basé sur ng-alain en angulaire ?

Cet article présente principalement l'exemple de définition angulaire de son propre composant de sélection basé sur ng-alain. Maintenant, je le partage avec vous et le donne comme référence.

1. La première est la page my-select2.component.html, où de nouvelles fonctions sont ajoutées en fonction des besoins de l'entreprise en fonction de la sélection de ng-alain ; 🎜>

<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>

2. L'autre est la page my-select2.component.ts Il y a des commentaires dans le code ; le code est le suivant :

3. Vient ensuite la page my-select2.service.ts, qui demande principalement le tableau déroulant renvoyé par l'interface d'arrière-plan. le lien passé depuis le composant parent. Le code est le suivant :

import { ControlValueAccessor } from '@angular/forms/src/directives';
import { Component, forwardRef, Input,OnInit,ElementRef,Output,EventEmitter} from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Router, NavigationEnd } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { SelectService } from './my-select2.service';
declare var $: any;
@Component({
 selector: 'nz-select2',
 templateUrl: './my-select2.component.html',
 providers: [ 
     {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NzSelect2Component),//注入表单控件
      multi: true
     }]
})
export class NzSelect2Component implements OnInit{
  constructor(private selectService:SelectService) { 
  }
 innerValue: any = ''; 
 //监听绑定的值，与外岑的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: 'text',
     value: 'value'
  };
 @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;
 }
}

4. Vient ensuite la page myselect.module.ts. Ici, le prérequis pour utiliser ce composant est d'introduire import { NzSelectModule } from 'ng-zorro -antd', le code est le suivant :

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

5. Comment utiliser, importez le module dont vous avez besoin : MySelectModule

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

export class MySelectModule {
  constructor() {

  }
}

6. Comment appeler : l'url est l'interface de requête le background, fieldKey est le format du tableau, ici vous pouvez définir les champs en fonction du format renvoyé par le background, tel que : return from the background Si le format est [{dmsm1:5,dmz:5}], alors fieldKey est défini comme suit. myPlaceHolder est le contenu affiché lors de l'initialisation. S'il s'agit d'un tableau local, il vous suffit d'ajouter [dataSource]="peer", où le peer est local. >7. Résumé : Grâce à ce composant, il suffit de modifier l'url et fieldKey pour l'introduire et l'utiliser dans n'importe quel module, réduisant ainsi l'utilisation de code et facilitant la maintenance

import { MySelectModule } from 'bizapp/base/components/myselect/myselect.module';

Ce qui précède, c'est moi, je l'ai compilé pour tout le monde. , j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

<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>

Interprétation détaillée des connaissances du minuteur Node

Analyse détaillée de la fonction Générateur dans Es6

Utilisez la méthode Array filter() en JavaScript pour implémenter des tableaux clairsemés compressés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!