Angular 角度7，将类添加到组件

我想动态地将模糊的类附加到我的角度组件。我的app.component.html文件如下所示：

<app-navbar [ngClass]="{blurred: shouldBlurComponent}"></app-navbar>

<div class="main">
  <div [ngClass]="{blurred: shouldBlurComponent}">
    <app-header></app-header>
  </div>
  <div class="router-outlet">
    <router-outlet ></router-outlet>
  </div>
  <app-footer [ngClass]="{blurred: shouldBlurComponent}"></app-footer>
</div>

.blurred {
  -webkit-filter: blur(5px) grayscale(90%);
}

它会产生如下效果（我的布局被破坏）： 正如您所见，它仅适用于应用程序标题组件，因为它被包装在div选择器中。不幸的是，类似的技巧不适用于其他组件。 我还尝试直接在我的应用程序导航栏和应用程序页脚组件中应用模糊类，它的工作原理与预期的一样。

如何从我的app.component.html将我的类正确添加到我的子组件中？如果可能，我希望避免将其作为参数传递

编辑：
应用程序页脚html

<footer class="fixed-footer">
  <div class="row">
    <div class="col-md-5">
      <a>{{'footer.adminContact' | translate}}</a>
    </div>
    <div class="col-md-5">
      {{'footer.disclamer' | translate}}
    </div>
  </div>
</footer>

应用程序页脚css

.fixed-footer{
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #5e5e5e;
  border-color: black;
  color: black;
  text-align: center;
  padding: 30px;
  border-top:  2px black solid;
  z-index:1;
}

编辑2:

---

我做了一个简单的演示：

模糊听起来像一个全局类，应该添加到

styles.css文件或应用程序中的任何其他全局样式表中


但它不起作用的原因是，默认情况下，元素具有
display:inline
。这导致它们在应用程序中没有维度，只有子组件有维度

将其添加到样式表中：

app-header,
app-footer,
app-navbar {
  display: block;
}


它不起作用的真正原因是因为您使用的是固定定位。根据html规范，只要元素有过滤器，它就会成为绝对和固定位置子体的新包含块。这意味着带有过滤器的元素的任何子元素都将根据过滤项进行定位

我的建议是更好地了解如何构造应用程序。不要为您的结构使用浮动/固定。但是看看DisplayFlex或grid

另外，你应该使用滤镜：模糊（5px）灰度（90%）。不再需要webkit，这样您就可以支持更多的浏览器。如果使用angular cli，则根本不需要添加前缀，因为它们是根据
.browserslistrc
文件中提到的浏览器支持自动添加的

.blurred {
  -webkit-filter: blur(5px) grayscale(90%);
}

将此添加到style.css中

在（BlurredService）服务文件中添加shouldBlurComponent。并创建用于检查的函数

checkStatus() {
if (this.BlurredService.shouldBlurComponent) {
      return 'blurred';
    }
}

在HTML
[ngClass]=“checkStatus（）”
中添加此项
 发布
应用程序页脚
html和tsCan你能用stackblitz创建它的演示吗？@Justcode我用一个demo@SachilaRanawaka多尼用一个演示链接更新了我的问题。已经在那里尝试了您的解决方案，但它不起作用。你能看一下吗？嗯，你期待什么？我看到所有的东西都模糊了，除了文字“我不模糊”。这不是你想要的吗？它破坏了我的布局。请看问题附带的第二张图片，或者在我的演示中从app.component.html中删除模糊类，以查看正确的答案layout@pokemzok好吧，我现在明白了。没有看到您正在使用固定定位：）我已更新了我的答案。但这不是一个你可以直接复制的答案，因为对我来说重写要花很长时间。总之，底线是。。重写您的结构以不使用位置：fixed@pokemzok很高兴你能成功，不客气！
checkStatus() {
if (this.BlurredService.shouldBlurComponent) {
      return 'blurred';
    }
}