Angular5中提取公共組件之radio list的實(shí)例代碼
本文給大家說一下Radio List的公共組件提取。
Radio List組件提取起來很方便,不想Checkbox那么復(fù)雜。
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>
在相關(guān)引用的module中注冊(cè)
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; }
對(duì)應(yīng)的html中引用如下:
<app-radio-list [list]="sourceArr" [name]="'selectedSource'" [colNum]="12" [(selectModel)]="selectedSource" (selectChange)="selectChange($event)"> </app-radio-list>
按照如上步驟,還缺少對(duì)應(yīng)的selectChange($event):
selectChange(model: any) { this[model.name] = model.value; }
總結(jié)
以上所述是小編給大家介紹的Angular5中提取公共組件之radio list的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
AngularJS路由實(shí)現(xiàn)頁面跳轉(zhuǎn)實(shí)例
這篇文章主要為大家詳細(xì)介紹了AngularJS路由實(shí)現(xiàn)頁面跳轉(zhuǎn)的實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Angularjs驗(yàn)證用戶輸入的字符串是否為日期時(shí)間
這篇文章主要介紹了Angularjs驗(yàn)證用戶輸入的字符串是否為日期時(shí)間,需要的朋友可以參考下2017-06-06Angular 4.X開發(fā)實(shí)踐中的踩坑小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 4.X開發(fā)實(shí)踐中的一些踩坑經(jīng)驗(yàn),文中主要介紹的是使用ngIf或者ngSwitch出錯(cuò)以及多級(jí)依賴注入器的相關(guān)內(nèi)容,需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示效果
本篇文章主要介紹了Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示的方法,具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01AngularJs IE Compatibility 兼容老版本IE
本文主要介紹AngularJs IE Compatibility 兼容老版本IE的問題及解決辦法,有興趣的小伙伴可以參考下2016-09-09