angular - Angular-如何为可重用组件添加不同的样式？

Question

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

这是stackblitz链接

标签： angulartypescriptangular-forms

Answer 1

有两个建议。

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

width: 100%;

2. 您可以将高度和宽度设置为组件的@Input 字段，还可以设置一些默认值，这样您就不需要每次使用组件时都指定高度和宽度。

可重用组件.ts

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

可重复使用的component.html

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

父组件.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>