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的变量作用域深入理解
Oct 25 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 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自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
网络教育自我鉴定
2014/02/04 职场文书
数控专业自荐书范文
2014/03/16 职场文书
安全责任书范本
2014/04/15 职场文书
节能标语大全
2014/06/21 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis