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 相关文章推荐
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
js使用formData实现批量上传
Mar 27 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
浅析JavaScript 函数柯里化
Sep 08 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 str_replace的替换漏洞
2008/03/15 PHP
php类中private属性继承问题分析
2012/11/01 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
深入浅析Python字符编码
2015/11/12 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
如何做好总经理助理
2013/11/12 职场文书
关于逃课的检讨书
2014/01/23 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
检讨书范文大全
2015/05/07 职场文书
学校推普周活动总结
2015/05/07 职场文书
拖欠货款起诉状
2015/05/20 职场文书
高中运动会前导词
2015/07/20 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers