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 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
javascript初学者常用技巧
Sep 02 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
理解JavaScript事件对象
Jan 25 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 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&amp;mysql(五)
2006/10/09 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
javascript读取RSS数据
2007/01/20 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python 域名分析工具实现代码
2009/07/15 Python
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
大学生村官任职感言
2014/01/09 职场文书
网络管理员岗位职责
2014/03/17 职场文书
婚假请假条怎么写
2014/04/10 职场文书
体育课课后反思
2014/04/24 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
考察邀请函范文
2015/01/31 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
Oracle锁表解决方法的详细记录
2022/06/05 Oracle