如何使用角度媒体查询更改组件的动态宽度

Posted 2023-03-05

【中文标题】如何使用角度媒体查询更改组件的动态宽度

【英文标题】：how to change dynamic width of component using media query in angular

【发布时间】：2021-07-05 16:26:18

【问题描述】：

我重复使用一个组件两次，但它们的宽度不同

<card-component [width]="50px">
<card-component [width]="30px">

//in card-component
@Input() public width: any;

<div [style.width]="width">

</div>

我想更改这两个组件的宽度（分配不同的宽度），以使其使用媒体查询在不同的屏幕尺寸上做出响应。我怎样才能控制单个组件。

【参考方案1】：

我认为有更好的方法可以做到这一点，例如为每个卡片组件使用包装 div 并使用 css 管理该 div 宽度，但您可以使用监听组件中屏幕宽度调整大小的 hostlistener 事件来实现。 ts

@HostListener('window:resize', ['$event'])
onResize(event) 
  // for example
  this.innerWidth = window.innerWidth / 3 + 'px';

这个在component.html中

<!-- for example... -->
<card-component [width]="innerWidth">
<card-component [width]="innerWidth">
<card-component [width]="innerWidth">

https://***.com/a/45350792/9764641

【讨论】：

这是为每个卡片组件分配相同的宽度，我想要分配不同的宽度

您可以为每个组件设置不同的变量，并在 onResize(event)... 中设置值