如何通过@input 属性应用样式，我想在 angular 中增加 mat-autocomplete 的宽度

Question

一位朋友正确地指出要使用属性@input，如在此处输入链接描述中所示。 我想应用新样式并更改mat-autocomplete的宽度。所以下拉宽度仍然很大。

我是新的 Angular，我不知道如何使用这个属性，但这是我尝试过的，这是行不通的。

组件.ts

 @Input() panelWidth: string | number;// I tried initializing this here for ex:50px, gives error

尝试将属性作为属性应用到 mat-autocomplete，如下所示

 <mat-autocomplete panelWidth ="170px" #auto="matAutocomplete" [displayWith] = "displayFn">

这是整个模板。html 代码片段自动完成

  <mat-form-field >
        <input matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
           <mat-autocomplete panelWidth ="170px" #auto="matAutocomplete" [displayWith] = "displayFn">
             <mat-option  *ngFor="let option of (filteredOptions | async)" [value] ="option">
               {{option.name}} {{option.type}}
             </mat-option>
           </mat-autocomplete>
      </mat-form-field> 

Answer 1

不要在 component.ts 中使用@Input() panelWidth ，这是文档中的定义。 作为最终用户，您应该按如下方式使用，

1. 硬编码值

<mat-autocomplete panelWidth ="170px" ...

2. 使用变量

// define variable in class
widthOfPanel = '170px';

在 HTML 中使用它并绑定，

<mat-autocomplete [panelWidth]="widthOfPanel" ...

Answer 2

在您的 styles 中试试这个

/deep/ .mat-autocomplete-panel {
    min-width: 133px;
    max-width: 340px;//your desire width
    width: 100%;
}

在内部component css中设置样式时使用/deep/否则，如果您在stlye.scss中全局设置样式，请不要使用它