本文給大家說一下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中注冊

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;}

對應(yīng)的html中引用如下：

 <app-radio-list [list]="sourceArr"         [name]="'selectedSource'"         [colNum]="12"        [(selectModel)]="selectedSource"        (selectChange)="selectChange($event)"> </app-radio-list>

按照如上步驟，還缺少對應(yīng)的selectChange($event):

 selectChange(model: any) {   this[model.name] = model.value; }

總結(jié)

以上所述是小編給大家介紹的Angular5中提取公共組件之radio list的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！