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>

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