Angular 将角度组件变量绑定到CSS数据属性

我从React开始学习Angular，并尝试使用CSS属性和Angular组件的动态数据

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

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

在SCSS中，我使用

[attribute]

功能来处理条件渲染

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

---

我试图将

菜单

的值从角度组件传递到要在SCSS中用于条件渲染的div的

数据打开

属性

由于

data open

是

div

元素的属性，而不是属性，因此应该使用：

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

试验

---

有关演示，请参阅。

使用

attr

绑定到数据属性：

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

试验

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