Angular5中提取公共组件之radio list的实例代码


Posted in Javascript onJuly 10, 2018

本文给大家说一下Radio List的公共组件提取。

Radio List组件提取起来很方便,不想Checkbox那么复杂。

radio-list.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { RadioItem } from '../../model/radio';
import { NgModel } from '@angular/forms';
@Component({
  selector: 'app-radio-list',
  templateUrl: './radio-list.component.html',
  styleUrls: ['./radio-list.component.css']
})
export class RadioListComponent implements OnInit {
  @Input() list: RadioItem[];
  @Input() name: string;
  @Input() colNum: number = 6;
  @Input("selectModel") model: string;
  @Output("selectChange") onChange: EventEmitter<any> = new EventEmitter<any>();
  constructor() { }
  ngOnInit() {
  }
  changeSelected() {
    let data = { value: this.model, name: this.name };
    this.onChange.emit(data);
  }
}

radio-list.component.html

<div *ngIf="list" class="form-row">
  <div class="col-{{colNum}} mb-2" *ngFor="let item of list">
    <div class="form-check abc-radio abc-radio-primary">
      <input class="form-check-input" type="radio" [value]="item.id" [(ngModel)]="model" (change)="changeSelected()" name="{{name}}" id="{{name}}_{{item.id}}">
      <label class="form-check-label" for="{{name}}_{{item.id}}">
        {{item.name}}
      </label>
    </div>
  </div>
</div>

在相关引用的module中注册

import { RadioListComponent } from '../components/radio-list/radio-list.component';
export const routes = [
  { path: '', component: xxxComponent, pathMatch: 'full' }
];
@NgModule({
  imports: [...],
  declarations: [...
    , RadioListComponent
    , ...],
  providers: []
})
export class xxxModule {
  static routes = routes;
}

对应的html中引用如下:

<app-radio-list [list]="sourceArr"
         [name]="'selectedSource'"
         [colNum]="12"
        [(selectModel)]="selectedSource"
        (selectChange)="selectChange($event)">
 </app-radio-list>

按照如上步骤,还缺少对应的selectChange($event):

selectChange(model: any) {
   this[model.name] = model.value;
 }

总结

以上所述是小编给大家介绍的Angular5中提取公共组件之radio list的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一些常用的Javascript函数
Dec 22 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
微信小程序实现图片上传功能
May 28 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
ng-alain表单使用方式详解
Jul 10 #Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 #Javascript
React之PureComponent的使用作用
Jul 10 #Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 #Javascript
echarts整合多个类似option的方法实例
Jul 10 #Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 #Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 #Javascript
You might like
javascript 学习之旅 (3)
2009/02/05 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
js实现图片轮播效果
2015/12/19 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
Python解释执行原理分析
2014/08/22 Python
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python实现推箱子游戏
2020/03/25 Python
logging level级别介绍
2020/02/21 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
2014年冬季防火方案
2014/05/21 职场文书
幼儿园课题方案
2014/06/09 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
合理化建议书
2015/02/04 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书