无法在Angular中选择绑定属性

Question

我在angular中有一个自定义的进度条。我想绑定一个用于[value]的选择器。但是，如果我在Angular中绑定属性，就不能再进行选择了。

<progress-bar value="50">工作

<progress-bar [value]="value">失败

在第二种情况下，该属性不存在，它只是作为ng-reflect*属性之一存在。这是预期的行为吗？

组件：

ProgressBar {
    private currentValue;
    @Input() set value(value: number) { this.currentValue = value; }
    get value() { return this.currentValue; }
...
}

scss：

progress-bar {
    display: block;
    height: 4px;
    width: 100%;

    // determinate
    &[value] {
        background: map_get($color-palette, progress-bar-background);

        .progress {
            height: 100%;
            background: map_get($color-palette, progress-bar-color);

            animation: none;
            transform-origin: top left;
            transition: transform 250ms ease;
        }
    }

    // indeterminate
    &:not([value]) {
        background: transparent;
    }
}

Answer 1

您可以使用attribute binding代替property binding

<progress-bar [attr.value]="value">

export class ProgressBar {

  constructor(private elementRef: ElementRef<HTMLElement>) {}

  get value() {
    const element = this.elementRef.nativeElement;
    return element.getAttribute("value");
  }
}

有关演示，请参阅this stackblitz。

一种更简单的解决方案是使用HostBinding在组件上有条件地设置类

export class ProgressBar {

  private currentValue;

  @Input()
  get value() { return this.currentValue; }
  set value(value: number) { this.currentValue = value; }

  @HostBinding("class.has-value") get hasValue(): boolean {
    return !!this.currentValue;
  }
}

并根据类选择器应用样式：

progress-bar {
  ...
  &.has-value { 
    ...
  }
  &:not(.has-value) { 
    ...
  }
}

有关演示，请参阅this stackblitz。

Answer 2

您正尝试在对象和方法之间使用单向属性绑定。删除getter和setter方法。它们有点没用，因为javascript没有真正的私有属性或方法。

ProgressBar {
    @Input() public value: number
...
}