Select组件目录结构
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;
}
}
padding:5px 10px;
background:red;
color:#FFF;
text-align: center;
width:40px;
outline: none;
border: none;
}
::ng-deep div:not(.current):hover{
background:green;
color:#FFF;
}
::ng-deep .selected {
font-weight: 700;
background: red;
color:#FFF;
}
selector:'[nzOption]'
})
export class NzOptionDirective{
@Input() value:string;
constructor(private el:ElementRef){}
@Output() select = new EventEmitter
@HostBinding("class.selected")
isSelected: boolean;
renderLabel(){
return (this.el.nativeElement.textContent || "").trim();
}
@HostListener('click')
onClick(){
this.select.emit();
}
}
应用 Select 组件
结构
selector: 'my-app',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
defaultValue: any = 'value5'
menus: any[] = [];
ngOnInit() {
for (let i = 0; i <= 6; i++) {
this.menus.push({
value: 'value' + i,label: 'item' + i
})
}
}
}
select value is {{defaultValue|json}}
