Angular-使用NgStyle动态更改CSS属性

沃西切·卡佐(Wojciech Kaczor)

我有div要显示的元素或不显示的元素(取决于屏幕大小)(我知道可以通过Mediaqueries完成,但是尝试使用Angular来实现)。所以[ngStyle]="{display: innerWidth < '600' ? 'none' : 'flex'}"innerWidth这个组件的.ts文件中的变量为变量时,我得到了NgStyle条件

public innerWidth: any;
  ngOnInit() {
    this.innerWidth = window.innerWidth;
  }

这项工作正常,但仅在重新加载页面时才进行更改,因此我想在调整浏览器窗口大小时动态触发此更改,是否可能以类似方式进行?

aw04

调整窗口大小时,您需要更新值。您可以听window:resize

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = event.target.innerWidth;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用宽度计算 Angular 6 动态设置左侧的 CSS 属性

来自分类Dev

Angular 6-在相同组件的变量更改时动态更改 *ngFor 元素的 css 属性

来自分类Dev

动态更改Angular指令元素属性

来自分类Dev

基于 URL 动态更改 DIV 的 css - Angular

来自分类Dev

在Angular指令中更改css属性值

来自分类Dev

使用Angular 2 / Meteor动态更改主题

来自分类Dev

使用Angular动态添加HTML属性

来自分类Dev

我如何使用angular7检查ngstyle背景属性中的其他条件?

来自分类Dev

如何为使用 ngFor (Angular) 动态生成的多个类定义相同的 css 属性?

来自分类Dev

Angular:动态更改伪类中的SCSS属性

来自分类Dev

使用Angular动态更新CSS类

来自分类Dev

如何将“ repeat()” css函数与Angular ngStyle指令结合使用?

来自分类Dev

在Meteor-Angular应用中动态更改背景CSS

来自分类常见问题

在Angular JS中动态应用CSS样式属性

来自分类Dev

在Angular 2中动态设置子项的css属性

来自分类Dev

使用AngularJS动态更改CSS类的属性

来自分类Dev

如何使用jQuery动态更改css的属性

来自分类Dev

Angular:动态更改JSON请求

来自分类Dev

在 Angular 中动态更改类

来自分类Dev

Angular PWA 动态更改清单

来自分类Dev

Angular动态访问对象属性

来自分类Dev

Angular动态访问对象属性

来自分类Dev

使用指令动态更改Angular JS中的模型绑定?

来自分类Dev

使用Angular动态更改ng-view动画类

来自分类Dev

使用指令动态更改Angular JS中的模型绑定?

来自分类Dev

使用指令Angular JS动态更改文本的颜色

来自分类Dev

Angular 动态添加 css 样式

来自分类Dev

Angular 中属性的更改检测

来自分类Dev

在 Angular 中的(更改)属性之外禁用复选框的使用

Related 相关文章

热门标签

归档