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 相关文章推荐
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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
CI框架Session.php源码分析
2014/11/03 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
Python回调函数用法实例详解
2015/07/02 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
Python实现把类当做字典来访问
2019/12/16 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python自带的IDE在哪里
2020/07/01 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
销售主管的自我评价分享
2014/01/03 职场文书
自我鉴定注意事项
2014/01/19 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
学习十八大的心得体会
2014/09/01 职场文书