Question

我在动态更新元素样式时遇到问题。

我在图像顶部覆盖了一些空白。我创建了一个子组件来处理此问题。我在子组件上调用一个函数，该函数计算边距，然后设置一个变量。

这是父组件调用，它是通过单击按钮触发的。

showMargins() {
    if (this.showingMargins) {

        this.showingMargins = false;
    } else {
        this.showingMargins = true;
        this.marginComponent.calculateMargins();
    }
}

这是我的子组件：

marginStyles: any = {};
...
calculateMargins() {
    //logic 
    ...
    //set the property
    this.marginStyles = {
       'height.px': height,
       'margin-left.px': left
    }
}

然后在我的模板中

<div id="margin-left" [ngStyle]="marginStyles">

我也尝试过使用函数

private leftDiv() {
    debugger;
    return this.marginStyles;
}

因此将模板更改为

<div id="margin-left" [ngStyle]="leftDiv()">

但无济于事。如果在声明变量时对值进行硬编码，则效果很好。

    marginStyles: any = {'height.px': 200, 'margin-left.px': 20};

如果我在模板中对其进行硬编码，它也可以正常工作；在完成计算之后，它只是失败了，并且不会渲染要覆盖的线条。我哪里出问题了？如果有帮助，我将使用Angular4。

编辑：我将所有逻辑移到了父组件上，一切看起来都很好。在我看来，我在marginStyle中使用的值并未在子组件中更新，这使我感到困惑。他们应该更新。 ngStyle工作正常，它是未更新的变量。

Answer 1

我已经实现了类似的代码

https://stackblitz.com/edit/angular-cvayak

，它似乎按预期工作。请检查差异。注意通过ViewChild装饰器进行的Element引用，所有函数都应该是公共的，ElementRef类型是由于类型化而成为引用组件类。

Answer 2

我认为您应该返回marginStyles而不是leftMarginStyles

从父组件调用时，角子组件变量未更新

2 个答案: