|
这篇文章主要介绍了Angular6写一个简单的Select组件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Select组件目录结构
/src
/app
/select
/select.ts
/select.html
/select.css
/options.ts
/index.ts
//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']
})
export class NzSelectComponent {
@Input() isOpen: boolean;
@Input() value: string;
@Output() valueChange = new EventEmitter<any>();
label: string;
@ContentChildren(NzOptionDirective, { descendants: true }) options: QueryList<NzOptionDirective>;
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.html
<ng-content *ngIf="isOpen"></ng-content>
<div *ngIf="!isOpen">{{label}}</div>
//select.css
:host {
display: inline-block;
border: 1px solid;
cursor: pointer;
text-align: center;
border-radius: 4px;
}
:host .current{
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;
}
//options.ts
import { Directive,HostBinding,HostListener,Input,Output,ElementRef,EventEmitter} from '@angular/core';
@Directive({
selector:'[nzOption]'
})
export class NzOptionDirective{
@Input() value:string;
constructor(private el:ElementRef){}
@Output() select = new EventEmitter<any>();
@HostBinding("class.selected")
isSelected: boolean;
renderLabel(){
return (this.el.nativeElement.textContent || "").trim();
}
@HostListener('click')
onClick(){
this.select.emit();
}
}
//index.ts
import { NzOptionDirective } from './option';
import { NzSelectComponent } from './select';
export const components = [
NzSelectComponent,
NzOptionDirective
];
应用 Select 组件
结构
/src
/app/
/app.module.ts
/app.component.ts
/app.component.html
//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 ]
})
export class AppModule { }
//app.component.ts
import { Component } from '@angular/core';
@Component({
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
})
}
}
}
//app.component.html
<nz-select [(value)]="defaultValue" [isOpen]="false">
<div nzOption *ngFor="let m of menus" [value]="m.value">{{m.label}}</div>
</nz-select>
<pre>
select value is <b>{{defaultValue|json}}</b>
</pre>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 | 
发表于 2018-8-20 09:34:54
