Angular5中提取公共组件之radio list的实例代码

本文给大家说一下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的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！