Angular 7，将类添加到组件

Question

我想动态地将一个blurred 类附加到我的 Angular 组件。我的 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 组件中直接应用 blurred 类，它按预期工作。

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

编辑:
应用页脚 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 :

Answer 1

Blurred 听起来像是一个全局类，应该添加到 styles.css 中文件，或您应用程序中的任何其他全局样式表。

<罢工>它不起作用的原因是因为默认情况下元素有 display: inline .结果是它们在您的应用程序中没有尺寸，只有子组件有尺寸

将此添加到样式表:

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

<罢工>

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

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

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