Question

我已经在Angular中制作了类似于组件之类的切换按钮，因此我可以在需要的任何地方使用它，但是我正在尝试解决问题，并且需要您的帮助。

我只需要向我显示所选的切换按钮，这样其他切换按钮就不会显示。当我单击选定的切换按钮时，然后显示其他切换按钮，例如展开和折叠，如果我单击选定的切换按钮，则不显示该数组中的所有内容。选定的切换按钮来自另一个具有ngModel的组件，该组件通过该组件告诉您所选择的组件我试过切片，但是没用。

这是切换按钮的组成部分。

<div id="toggle-button" fxLayout="row" fxLayoutAlign="start end">
    <label [style.width]="labelWidth" [style.paddingRight]="label.length > 0 ? '10px' : '0'">
        {{label}}
    </label>
    <div *ngFor="let option of options | slice:0:1; let first = first; let last = last" [ngClass]="{'first': first, 'last': last, 'selected': option.value === value, 'divider' : !last, 'clickable': !readonly, 'not-selectable': readonly}"
     [style.width]="optionWidth" (click)="select(option.value)" fxLayout="row" fxLayoutAlign="center center">
        <span (click)="options.length">{{option.text}}</span>

    </div>
</div>

export class ToggleButtonComponent implements OnInit, ControlValueAccessor {
    @Input() options: ToggleOption[] = []
    @Input() label = ""
    @Input() value: any
    @Input() labelWidth = ""
    @Input() optionWidth = ""
    @Input() readonly = false
    @Output() toggle = new EventEmitter<any>()
    onChangeCallback: (selected: any) => void = () => { }
    onTouchedCallback: (selected: any) => void = () => { }
    constructor() {
    }

    ngOnInit() {
        console.log(this.value)

    }

    writeValue(selected: any): void {
        this.value = selected
    }

    registerOnChange(callback: (selected: any) => void): void {
        this.onChangeCallback = callback
    }

    registerOnTouched(callback: (selected: any) => void): void {
        this.onTouchedCallback = callback
    }

    select(selected: any) {
        if (!this.readonly) {
            this.value = selected
            this.onChangeCallback(selected)
            this.onTouchedCallback(selected)
            this.toggle.emit(selected)
        }
    }
}

export interface ToggleOption {
    text: string
    value: any
}

这是我声明切换按钮的另一个组件。

readonly categoryOptions: ToggleOption[] = [
    { text: "BUS", value: 0 },
    { text: "BOS", value: 1 },
    { text: "BIS", value: 2 }
]
<app-toggle-button label="Category" labelWidth="75px" [options]="categoryOptions" [(ngModel)]="valueItem.category"></app-toggle-button>

Answer 1

目标

旨在具有多个选项的多个切换按钮。

解决方案

您需要具有toggleState变量才能显示/隐藏其他按钮。
变量value用于检查当前选中的按钮。

您只需将ts和html文件调整为-

ts

添加名为toggleState的新变量以保持切换状态，并在每次调用select function时更改状态。

 toggleState = false;
 select(selected: any) {
        if (!this.readonly) {
            this.value = selected
            this.onChangeCallback(selected)
            this.onTouchedCallback(selected)
            this.toggle.emit(selected)
            this.toggleState = !this.toggleState; //<-- toggle state here
        }
    }

html

只需使用语法*ngIf="option.value == value || toggleState

检查当前值并切换状态

"

 <div id="toggle-button" fxLayout="row" fxLayoutAlign="start end">
        <label [style.width]="labelWidth" [style.paddingRight]="label.length > 0 ? '10px' : '0'">
            {{label}}
        </label>
        <div *ngFor="let option of options; let first = first; let last = last" [ngClass]="{'first': first, 'last': last, 'selected': option.value === value, 'divider' : !last, 'clickable': !readonly, 'not-selectable': readonly}"
         [style.width]="optionWidth" (click)="select(option.value)" fxLayout="row" fxLayoutAlign="center center"
 *ngIf="option.value == value || toggleState">
            <span (click)="options.length">{{option.text}}</span>

        </div>
    </div>

在其他任何地方单击时切换为假

您可以使用HostListener来处理-

 constructor(private elementRef: ElementRef) {}

 @HostListener('document:click', ['$event'])
  public documentClick(event: MouseEvent): void {
    const targetElement = event.target as HTMLElement;

      // Check if the click was outside the element
      if (targetElement && !this.elementRef.nativeElement.contains(targetElement)) {

         this.toggleState = false; //<-- you can emit if required.
      }
  }

注意：理想情况下，这种情况应通过指令处理。

Answer 2

我会使用Pipe，这样吗？

https://stackblitz.com/edit/angular-5u5wn1

在Angular 4和其他切片中显示所选的切换按钮

2 个答案:

目标

解决方案

ts

html

在其他任何地方单击时切换为假