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

Select组件目录结构

/src  /app    /select    /select.ts    /select.html    /select.css    /options.ts    /index.ts

//select.tsimport { 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.tsimport { 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.tsimport { 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.tsimport { 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 { }