angular6 mysql_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();

label: string;

@contentchildren(nzoptiondirective, { descendants: true }) options: querylist;

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

{{label}}

//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();

@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

{{m.label}}

select value is {{defaultvalue|json}}

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

希望与广大网友互动？？

点此进行留言吧！