angular - 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%);
}

它产生这样的效果（我的布局被破坏）：

如您所见，它仅对app-header组件有效，因为它包装在div选择器中。不幸的是，类似的技巧不适用于其他组件。
我还尝试直接在我的app-navbar和app-footer组件内部应用模糊类，它的工作原理与预期一致。


如何从我的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>

应用程序页脚ts

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

应用程序页脚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：
我做了一个简单的演示Working demo here：

最佳答案

模糊的声音听起来像全局类，应该添加到styles.css文件或应用程序中任何其他全局样式表中。


它之所以不起作用的原因是，默认情况下元素具有display: inline。结果表明它们在您的应用程序内没有尺寸，只有子组件具有尺寸

将此添加到样式表：

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

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

我的建议是更好地了解如何构建应用程序。不要为您的结构使用float / fixed。但是看看显示柔性或网格

另外，您应该使用filter: blur(5px) grayscale(90%);。 Webkit prefix不再是必需的，因此您可以支持更多浏览器。如果使用angular cli，则根本不需要添加前缀，因为前缀会根据.browserslistrc文件中提到的浏览器支持自动添加