无法在 Angular 中选择绑定属性答案

【问题标题】：Can't select a bound attribute in Angular无法在 Angular 中选择绑定属性
【发布时间】：2018-08-21 23:09:14
【问题描述】：

我有一个角度的自定义进度条。我想绑定一个[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;
    }
}

【问题讨论】：

只是猜测，但“值”可能被 Component 类保留。你试过像“myValue”这样的东西吗？

标签： css angular css-selectors

【解决方案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 以获取演示。

【讨论】：

这行得通，但这是唯一的方法吗？在我看来，这将是一个常见的用例。 [attr.value] 不得不向下游解释有点傻，哈哈。更不用说查找和属性转换的麻烦了。
我添加了另一个（更简单的）解决方案，它使用类样式。
是的，第二个解决方案是我正在做的，但我很惊讶 Angular 破坏了破坏 css 功能的属性。

【解决方案2】：

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

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

【讨论】：

仍然只有 ng-reflect-value 和 :not([value]) 是匹配的。