1,首先是my-select2.component.html页面,这里是在ng-alain的选择基础上根据业务需求添加新的功能,代码如下:
& lt; nz-select #选择[(ngModel)]=[nzPlaceHolder]“selectedOption”=癿yPlaceHolder nzAllowClear [nzShowSearch]=" true " [nzNotFoundContent]=薄拔奁ヅ涞摹氨?
& lt; nz-option
* ngFor=叭醚∠畹难≡瘛?
[nzLabel]=" option.label "
[nzValue]="选项"
[nzDisabled]=" option.disabled "比;
& lt;/nz-option>
& lt;/nz-select>
2,再者是my-select2.component.ts页面,代码里面有注释;代码如下:
从“@angular进口{ControlValueAccessor}/形式/src/指令的;
进口{组件,forwardRef、输入、OnInit ElementRef,输出,EventEmitter} ' @angular/核心”;
从@angular/形式的进口{NG_VALUE_ACCESSOR};
从“@angular进口{路由器,NavigationEnd}/路由器”;
进口{FormGroup FormBuilder,验证器}“@angular/形式”;
进口{SelectService}”。/my-select2.service ';
美元var声明:任何;
@ component ({
选择器:“nz-select2”,
templateUrl:“。/my-select2.component.html”,
供应商:[
{
提供:NG_VALUE_ACCESSOR,
useExisting: forwardRef(()=比;NzSelect2Component)//注入表单控件
多:真
})
})
出口类NzSelect2Component实现>
从“@angular进口{注射}/核心”;
进口{头,Http、URLSearchParams RequestOptions}“@angular/Http”;
从“@angular进口{HttpClient, HttpErrorResponse}/共同/http ';
进口的rxjs/添加/运营商/toPromise”;//导入{环境}“. ./. ./环境/环境”;
@Injectable ()
出口类SelectService {
构造函数(私人http: HttpClient) {}
getValue (url:有):{
返回this.http
. get (url);
}
}
之前
4,然后是myselect.module。ts页面,这里,使用该组件的前提是要引入从ng-zorro-antd,进口{NzSelectModule}代码如下:
从“@angular进口{NgModule, ModuleWithProviders}/核心”;
从“@angular/普通”进口{CommonModule};
进口{FormsModule, ReactiveFormsModule}“@angular/形式”;
进口{NzSelect2Component}”。/my-select2.component ';
进口{SelectService}”。/my-select2.service ';
从“ng-zorro-antd”进口{NzSelectModule};
@NgModule ({
进口:[
CommonModule,
FormsModule,
NzSelectModule,
ReactiveFormsModule
),
出口:[
NzSelect2Component
),
声明:[
NzSelect2Component
),
供应商:[
SelectService
]
})
出口类MySelectModule {
构造函数(){
}
}
之前
5,使用方法,在你需要的模块引入:MySelectModule
从“bizapp进口{MySelectModule}/基地/组件/myselect/myselect.module’;
6,如何调用:url为请求后台的接口,fieldKey为数组的格式,这里可以根据后台返回来的格式定义这里的字段,如:后台返回格式为[{dmsm1:5 dmz: 5}]则fieldKey的定义如下,myPlaceHolder为初始化时显示的内容,如果是本地数组,则只需要加上(数据源)=岸缘取?这里的同伴为本地数组
代码如下:
& lt; nz-select2 [url]="的分析/api/数据/代码/清单/030107’”[(ngModel)]=" search3。hpzl”[fieldKey]="{文本:“dmsm1”,价值:“非军事区”}" [myPlaceHolder]=" "号牌种类”“祝辞& lt;/nz-select2>
7日总结:通过这个组件,我们只需要修改url和fieldKey就可以在任意模块引入然后使用,减少代码的使用,方便维护
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
