欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-04 16:53:57
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>

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