时间戳

首页 > 解决方案 > 显示 Angular 4 和另一个切片中选定的切换按钮

html - 显示 Angular 4 和另一个切片中选定的切换按钮

问题描述

我已经在 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>

标签： htmlangulartypescript

解决方案

目标

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

解决方案

  1. 您需要有toggleState变量来显示/隐藏其他按钮。
  2. 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>

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

您可以使用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.
      }
  }

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

推荐阅读