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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
js中跨域方法原理详解
Jul 19 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
vue文件树组件使用详解
Mar 29 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Python重新引入被覆盖的自带function
2014/07/16 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
python中format函数如何使用
2020/06/22 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
班委竞选演讲稿
2014/04/28 职场文书
司考复习计划
2015/01/19 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
python中pycryto实现数据加密
2022/04/29 Python