代码之家 › 专栏 › 技术社区 › pokemzok

角度7,将类添加到组件

css3 angular

3

pokemzok · 技术社区 · 6 年前

我要动态附加 变模糊 我的角组件。我的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类到我的子组件?如果可能,我希望避免将其作为参数传递。

编辑:
应用程序页码

<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>

应用程序页脚

@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 :

2 回复 | 直到 6 年前

1

3

Poul Kruijt 6 年前

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

~~但它不起作用的原因是,元素在默认情况下 display: inline . 结果是它们在应用程序中没有维度,只有子组件具有维度~~

将此添加到样式表:

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

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

我的建议是更好地了解如何构造应用程序。不使用浮动/固定结构。但是看看显示灵活性,或者网格

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

2

0

Akshay Pamnani 6 年前

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

将此添加到style.css中

添加 应力成分 在(模糊服务)服务文件中。并创建要检查的函数

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

在HTML中 [ngClass]="checkStatus()" 加上这个。