Angular- 如何给一个可重用的组件添加不同的样式？

Question

我制作了一个 table，用户可以在其中添加数据。输入字段是一个可重用的组件。我想增加突出显示的输入字段的宽度和高度，同时减少 table 内输入字段的宽度。我该怎么做？

这是 stackblitz link

Answer 1

有两个建议。

您可以将此组件的宽度设置为100%，然后从使用组件的位置控制组件的宽度。（仅适用于宽度）

width: 100%;

你可以把高宽做成组件的@Input字段，也可以设置一些默认值，这样就不用每次使用组件时都给高宽了。

resusable-component.ts

   @Input()
   height = 100;
    
   @Input()
   width= 100;

resusable-component.html

<div 
  [style.width.px]={width} 
  [style.height.px]={height}>
</div>

parent.component.html

<!-- When you want to have a custom height and width-->
<resusable [height]=200 [width]=300></reusable>

<!-- When you want to have a default height and width-->
<resusable></reusable>

Angular- 如何给一个可重用的组件添加不同的样式？

Angular- How to add different style to a reusable component?

typescript

angular

angular-forms