Angular7 组件视图在数据操作时折叠

Question

我遇到了最奇怪的问题。我确实有一个组件，其样式由它正在处理的某些对象控制。当对象作(通过某些内部组件单击(时，整个视图将折叠到 0 的高度。

我试图通过ngStyle，ngClass，plain ol'javascript应用视图更改 - 但没有任何效果。第二件奇怪的事情 - 处理外部组件的组件样式非常有效。

对象

const valueMap = {
width: '100%',
...
}

伪组件树

<component-a>
<component-b [ngStyle]="{'width': valueMap.width} [valueMap]="valueMap">
<div (click)="changePosition()">Button</div>
</component-b>
</component-a>

方法

changePosition() {
this.valueMap.width = this.valueMap.width==='100%' ? '50%' : '100%';
}

我真的希望组件 b 折叠到 50% 的宽度，但不会让高度折叠到零。我可以在代码中看到，当我单击按钮时，样式将应用于元素 - 如果在 Chrome DevTools 中停用应用的样式并再次激活它，它会正确显示。从来没有这样的事情。有人可以帮忙吗？

提前谢谢。安德烈

Answer 1

我试图重现您的问题。 虽然我无法得到您似乎遇到的错误，我想我可以看到手头的问题：

从您的 HTML 中

<component-a>
<component-b [ngStyle]="{width: 'valueMap.width'} [valueMap]="valueMap">
<div (click)="changePosition()">Button</div>
</component-b>
</component-a>

我可以得到，你的"价值映射"是组件 b 中的一个输入((。 所以我也这样做了，并在最外层的组件(使用组件 A 和 B 的组件(上声明了 valueMap。

我重新创建了您的 html，并发现了解析错误等等，直到我意识到一些事情：

<app-collapse-on-click>
<app-collapse-child [ngStyle]="{'width': valueMap.width, 'background-color': 'rebeccapurple'}" [valueMap]="valueMap">
<div><button (click)="changePosition()">Button</button></div>
</app-collapse-child>
</app-collapse-on-click>

使用 ngStyle 时，样式被解释为对象。 这意味着，在您的情况下，您需要删除 ' arround valueMap.width 并将它们添加到宽度中。

我添加了背景颜色以获得视觉结果，而不仅仅是样式 html。

希望以某种方式有所帮助。

问候

艾伦