Question

我想创建一个向用户提供选择列表的组件，但在任何给定时间只允许一个选择。 mat-radio-group的功能似乎最合适，但我不希望在我的radio组中的标签旁边显示实际的单选按钮。我想扩展标签，并通过标签本身上的click事件触发任何(change)事件。

在保持标签不变的情况下，从我的广播组中删除单选按钮的最“ hacky”方式是什么？

Answer 1

您还可以进行自定义表单控件。这个想法是有一个.html之类的

<select-component [(ngModel)]="valor">
    <div select value="1">One</div>
    <div select>Two</div>
</select-component>

我们要发出一条指令，表明选择器是[select]

@Directive({
  selector: '[select]',
})
export class SelectDirective implements AfterViewInit {
  @Input('value')value:any;
  control:any;
  @HostBinding('class.selected') 
  get isSelected(){
    return this.control && this.control.value==this.value?true:undefined
    }
  @HostBinding('class.select')setClass(){return true}
  @HostListener('click') onclick() {
    console.log(this.value);
    if (this.control)
      this.control.setValue(this.value)
  }
  constructor(private el:ElementRef){}

  ngAfterViewInit()
  {
      this.value=this.value ||this.el.nativeElement.innerHTML
  }
}

请注意，在ngAfterViewInit中，我们为this.value赋值，因为div情况的innerHTML您尚未定义该值有两种类绑定，一种是.select，这使我们可以从app.main.component中将.css交给我们的组件，一种是在div被“选中”时选择的。selected。

SelectComponent是一个典型的自定义窗体控件，“有趣”是，在ngAfterViewInit中，我们询问内部的“ select”指令，以允许该指令和组件进行通讯

@Component({
  selector: 'select-component',
  template: `<ng-content></ng-content>`,
   providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => SelectComponent),
      multi: true
    }

  ]
})
export class SelectComponent implements ControlValueAccessor,AfterViewInit  {
  @ContentChildren(SelectDirective)selects:QueryList<SelectDirective>;
  value:any;
  disabled:boolean=false;
  onChange:any;
  onTouched:any;

   writeValue(value: any[]|any): void {
    this.value=value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled=isDisabled
  }

  ngAfterViewInit()
  {
    this.selects.forEach(x=>{
      x.control=this
    })
  }
  setValue(value)
  {
    this.value=value
    this.onChange(value)
  }
}

瞧，stackblitz

如何在没有单选按钮的情况下建立Mat-Radio组？

1 个答案: