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>

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