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

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 = new EventEmitter();

constructor() { }

ngOnInit() {

}

changeSelected() {

let data = { value: this.model, name: this.name };

this.onChange.emit(data);

}

}

radio-list.component.html

{{item.name}}

在相关引用的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中引用如下：

[name]="'selectedSource'"

[colNum]="12"

[(selectModel)]="selectedSource"

(selectChange)="selectChange($event)">

[name]="'selectedSource'"

[colNum]="12"

[(selectModel)]="selectedSource"

(selectChange)="selectChange($event)">

按照如上步骤，还缺少对应的selectChange($event):

selectChange(model: any) {

this[model.name] = model.value;

}

总结

以上所述是给大家介绍的Angular5中提取公共组件之radio list的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。