Wie definiere ich meine eigene ausgewählte Komponente basierend auf ng-alain in Angular?

In diesem Artikel wird hauptsächlich das Beispiel der Winkeldefinition einer eigenen ausgewählten Komponente basierend auf ng-alain vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

1. Die erste ist die Seite my-select2.component.html, auf der basierend auf den Geschäftsanforderungen neue Funktionen hinzugefügt werden. Der Code lautet wie folgt:

<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. Die andere ist die Seite my-select2.component.ts. Der Code lautet wie folgt:

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

3. Dann kommt die Seite my-select2.service.ts, die hauptsächlich das von der Hintergrundschnittstelle zurückgegebene Dropdown-Array anfordert Die übergeordnete Komponente lautet wie folgt:

rrree

4. Hier kommt die Voraussetzung für die Verwendung Diese Komponente dient zum Einführen von import { NzSelectModule } aus 'ng-zorro-antd'. Der Code lautet wie folgt:

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 Verwenden Sie, importieren Sie das Modul, das Sie benötigen: 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. So rufen Sie auf: URL ist die Schnittstelle zum Anfordern des Hintergrunds, FieldKey ist das Format des Arrays Hier können Sie die Felder entsprechend dem vom Hintergrund zurückgegebenen Format definieren, zum Beispiel: Das Hintergrundrückgabeformat ist [{dmsm1:5,dmz: 5}] Dann ist die Definition von fieldKey der angezeigte Inhalt während der Initialisierung. Wenn es sich um ein lokales Array handelt, müssen Sie nur [dataSource]="peer" hinzufügen, wobei peer das lokale Array ist

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

7, Zusammenfassung: Durch diese Komponente müssen wir nur das ändern URL und FieldKey, um es in jedem Modul einzuführen und zu verwenden, wodurch der Codeverbrauch reduziert und die Wartung erleichtert wird.

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Interpretation des Node-Timer-Wissens

Detaillierte Analyse der Generatorfunktion in Es6

Verwenden Sie die Array filter()-Methode in JavaScript, um komprimierte Sparse-Arrays zu implementieren

Das obige ist der detaillierte Inhalt vonWie definiere ich meine eigene ausgewählte Komponente basierend auf ng-alain in Angular?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!