Question

我从React开始使用Angular，并且试图将CSS属性与Angular组件中的动态数据结合使用。

这是我到目前为止尝试过的，我有点困惑。

colourvalues::convert_colours( 
  matrix( as.numeric( unlist( strsplit(x, " ") ) ) , ncol = 3, byrow = T)
)
# [1] "#A5EFD2" "#6F2D5D"

在我的页面中，我声明菜单为“打开”

<div id="application-menu" data-open="{{ menu }}">
  <div class="background"></div>
  <h1>Test</h1>
</div>

在SCSS中，我正在使用export class AuthPage { menu = "true"; }功能来处理条件渲染。

[attribute]

我试图将Angular组件中#application-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; pointer-events: none; background-color: transparent; .background { position: absolute; left: -100px; top: -100px; width: 50px; height: 50px; border-radius: 50%; background-color: red; transition: all 0.4s ease-in-out; } &[data-open="true"] { pointer-events: all; .background { background-color: green; border-radius: 0; width: 100vw; height: 100vh; top: 0; left: 0; } } }的值传递给div的menu属性，以在SCSS中用于条件渲染。

Answer 1

由于data-open是div元素的属性，而不是属性，因此应使用attribute binding：

<div id="application-menu" [attr.data-open]="menu">
  <div class="background"></div>
  <h1>Test</h1>
</div>

有关演示，请参见this stackblitz。

Answer 2

使用attr绑定到数据属性：

<div id="application-menu" [attr.data-open]="menu">
  <div class="background"></div>
  <h1>Test</h1>
</div>

将角度分量变量绑定到CSS数据属性

2 个答案: