从父组件调用时角度子组件变量不更新答案

【问题标题】：Angular child component variable not updating when called from parent component从父组件调用时角度子组件变量不更新
【发布时间】：2019-01-09 17:04:52
【问题描述】：

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

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

这里是父组件调用，通过按钮点击触发。

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

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

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

【问题讨论】：

函数calculateMargins()在哪里调用？
被父组件调用。
你能在stackblitz.com/fork/angular上提供小演示吗？
返回 this.leftMarginStyles;或返回 this.marginStyles; ?
尝试使用<div>{{ marginStyles | json }}</div> 在视图中显示样式。它可能处于无效状态（height 和 left 在您的代码中可能不是有效数字）。

标签： angular typescript

【解决方案1】：

我已经实现了类似的代码

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

它似乎按预期工作。请检查差异。注意通过ViewChild装饰器引用的Element，所有函数都应该是public，ElementRef类型是引用组件类，因为类型化了。

【讨论】：

打败我，这就是我正在做的事情。
我没有看到我的源代码与我们在 stackblitz 中实现的代码有什么不同，这让我感到困惑，为什么它可以在那里工作，但在我的项目中却不行

【解决方案2】：

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

【讨论】：