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


Posted in Javascript onAugust 20, 2018

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>

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

Javascript 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
canvas实现图像放大镜
Feb 06 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 Javascript
Layer弹出层动态获取数据的方法
Aug 20 #Javascript
layui 给数据表格加序号的方法
Aug 20 #Javascript
解决LayUI表单获取不到data的问题
Aug 20 #Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 #Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 #Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 #Javascript
Vue常用指令详解分析
Aug 19 #Javascript
You might like
详谈PHP文件目录基础操作
2014/11/11 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python标准库与第三方库详解
2014/07/22 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
Django多个app urls配置代码实例
2020/11/26 Python
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
英文自荐信
2013/12/15 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL