Angular 7，向组件添加类

Question

我想将 blurred 类动态添加到我的角度组件中。我的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;
}

EDIT2：
我做了一个简单的演示Working demo here：

Answer 1

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

<罢工> 但是，它无法正常工作的原因是，默认情况下，元素具有display: inline。结果表明它们在您的应用程序内部没有尺寸，只有子组件具有尺寸

将此添加到样式表：

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

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

我的建议是更好地了解如何构建应用程序。不要为您的结构使用float / fixed。但请看一下Display Flex或网格

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

Answer 2

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

将此添加到style.css

在（BlurredService）服务文件中添加 shouldBlurComponent 。并创建检查功能

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

在HTML [ngClass]="checkStatus()"中添加此内容。