Angular6 写一个简单的Select组件示例
程序员文章站
2022-06-17 14:06:16
select组件目录结构
/src
/app
/select
/select.ts
/select.html
/se...
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。