【问题标题】:How can I access boolean variable from Html or ts file into scss?如何将布尔变量从 Html 或 ts 文件访问到 scss?
【发布时间】:2019-11-01 12:52:29
【问题描述】:

我有 changes 变量,它在 component.ts 文件中是布尔值。此变量也用于.html 文件。我正在尝试在 .scss 文件中访问此变量,如果为真,则基于布尔条件,应在网站上应用移动属性。如何在 scss 文件中访问此布尔变量并应用于 &.Mobile 并确保更改与可编辑模板一起正常工作?

这是我的 .html 文件

    <div class="ab-table-filters">

这是我的 scss 文件

.bot {
  border-radius: 2px;
  text-align: left;
  width: 100%;

  @media (min-width: 700px) {
    display: none;
  }
}
      .open {
        ul {
          position: relative;
          top: auto;
        }
      }
    }
  }
  .ab-table-filter {
    border-radius: 2px;


    @media (max-width: 700px) {
      display: none;
    }

    &.disabled {
      opacity: .4;
      pointer-events: none;

      &:hover {
        cursor: no-drop;
      }

}

}

【问题讨论】:

    标签: angular sass


    【解决方案1】:

    IMO,你不能。

    相反,您可以根据 HTML 元素中变量的值将 CSS/SCSS 类绑定到模板中,例如 -

    <div [ngClass]="{'ab-table-filters':true, 'css-class': changes }">
    

    在这里我添加了两个组合,默认情况下始终应用的类和动态 CSS 类,希望这会有所帮助。

    更新-

    @media screen and (max-width: 768px) {
      body {
        background-color: red;
      }
    }
    

    【讨论】:

    • 我不能使用 NgClass,我必须重构我的代码以不使用 Ngclass 并确保功能保持不变
    • 哦,那是不同的问题,但我相信这是最干净、最简单的方法。
    • 如何在不使用变量的情况下利用媒体查询来实现这一点?
    • 您可以使用媒体查询设置屏幕宽度条件并相应地更改样式。
    • 当最大宽度为 768 像素时,我基本上必须为移动设备设置属性。但是在 scss 中我该如何使用这个逻辑呢?
    猜你喜欢
    • 2020-02-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-17
    • 2021-05-25
    • 2021-08-16
    • 1970-01-01
    • 2022-09-22
    相关资源
    最近更新 更多