Beispielcode zum Extrahieren der Radioliste öffentlicher Komponenten in Angular5_AngularJS

In diesem Artikel wird hauptsächlich der Beispielcode zum Extrahieren der Radioliste öffentlicher Komponenten in Angular5 vorgestellt. Er ist sehr gut und hat einen gewissen Referenzwert.

In diesem Artikel erfahren Sie mehr darüber Radioliste. Extraktion öffentlicher Komponenten.

Die Radio List-Komponente lässt sich sehr bequem extrahieren und ist nicht so kompliziert wie 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

<p *ngIf="list" class="form-row">
  <p class="col-{{colNum}} mb-2" *ngFor="let item of list">
    <p 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>
    </p>
  </p>
</p>

Registrieren Sie

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

im entsprechenden referenzierten Modul. Die entsprechende HTML-Referenz lautet wie folgt:

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

Folgen Sie den obigen Schritten, aber der entsprechende selectChange($event) fehlt noch:

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

Das obige ist der detaillierte Inhalt vonBeispielcode zum Extrahieren der Radioliste öffentlicher Komponenten in Angular5_AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!