Angular6 写一个简单的Select组件示例

2023-09-08 20:17:05 313

//select.ts import{Component,ContentChildren,ViewChild,Input,Output,EventEmitter,QueryList,HostListener}from'@angular/core'; import{NzOptionDirective}from'./option'; @Component({ selector:'nz-select', templateUrl:'./select.html', styleUrls:['./select.css'] }) exportclassNzSelectComponent{ @Input()isOpen:boolean; @Input()value:string; @Output()valueChange=newEventEmitter(); label:string; @ContentChildren(NzOptionDirective,{descendants:true})options:QueryList; ngAfterContentInit(){ this.options.forEach(option=>{ option.select.subscribe(()=>{ this.value=option.value; this.label=option.renderLabel(); this.options.map(r=>r.isSelected=false); option.isSelected=true; this.valueChange.emit(option.value); }) setTimeout(()=>{ option.isSelected=option.value===this.value; if(option.isSelected){ this.label=option.renderLabel(); this.valueChange.emit(option.value); } }); }) } @HostListener('click') onClick(){ this.isOpen=!this.isOpen; } }

//select.css :host{ display:inline-block; border:1pxsolid; cursor:pointer; text-align:center; border-radius:4px; } :host.current{ padding:5px10px; background:red; color:#FFF; text-align:center; width:40px; outline:none; border:none; } ::ng-deepdiv:not(.current):hover{ background:green; color:#FFF; } ::ng-deep.selected{ font-weight:700; background:red; color:#FFF; }

//options.ts import{Directive,HostBinding,HostListener,Input,Output,ElementRef,EventEmitter}from'@angular/core'; @Directive({ selector:'[nzOption]' }) exportclassNzOptionDirective{ @Input()value:string; constructor(privateel:ElementRef){} @Output()select=newEventEmitter(); @HostBinding("class.selected") isSelected:boolean; renderLabel(){ return(this.el.nativeElement.textContent||"").trim(); } @HostListener('click') onClick(){ this.select.emit(); } }

//app.module.ts import{NgModule}from'@angular/core'; import{BrowserModule}from'@angular/platform-browser'; import{FormsModule}from'@angular/forms'; import{CommonModule}from'@angular/common'; import{components}from'./select'; import{AppComponent}from'./app.component'; @NgModule({ imports:[BrowserModule,FormsModule,CommonModule], declarations:[AppComponent,...components], bootstrap:[AppComponent] }) exportclassAppModule{}

//app.component.ts import{Component}from'@angular/core'; @Component({ selector:'my-app', templateUrl:'./app.component.html', styleUrls:['./app.component.css'] }) exportclassAppComponent{ name='Angular'; defaultValue:any='value5' menus:any[]=[]; ngOnInit(){ for(leti=0;i<=6;i++){ this.menus.push({ value:'value'+i, label:'item'+i }) } } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Angular6 写一个简单的Select组件示例

热门推荐

随机推荐