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 相关文章推荐
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 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
PHP生成带有雪花背景的验证码
2008/09/28 PHP
php 空格,换行,跳格使用说明
2009/12/18 PHP
php继承的一个应用
2011/09/06 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
JS查看对象功能代码
2008/04/25 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python中的随机函数random的用法示例
2018/01/27 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
金融专业推荐信
2013/11/14 职场文书
小学生安全保证书
2014/02/01 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
广告设计应届生求职信
2014/03/01 职场文书
《春天来了》教学反思
2014/04/07 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
安全责任协议书范本
2016/03/23 职场文书