代码之家 › 专栏 › 技术社区 › Anthony

无法选择角度中的绑定属性

css-selectors angular css

Anthony · 技术社区 · 6 年前

我有一个角度自定义进度条。我想订一个选择器 [value] . 但是,如果以角度绑定属性,则无法再进行选择。

<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;
    }
}

2 回复 | 直到 6 年前

ConnorsFan 6 年前

而不是 property binding ,您可以使用 attribute 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 为了演示。

Calidus 6 年前

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

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前