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 相关文章推荐
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
vue组件间通信解析
Mar 01 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
基于node.js实现爬虫的讲解
Feb 18 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加MYSQL服务器
2006/10/09 PHP
cache_lite试用
2007/02/14 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
Python编程求质数实例代码
2018/01/31 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
一套Delphi的笔试题二
2013/05/11 面试题
个人自荐材料
2014/05/23 职场文书
小学教师党员承诺书
2015/04/27 职场文书
安全承诺书格式范本
2015/04/28 职场文书
初中军训感言
2015/08/01 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
OpenCV全景图像拼接的实现示例
2021/06/05 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS
python数字图像处理之图像的批量处理
2022/06/28 Python