如何通过@input 属性应用样式，我想以角度增加垫子自动完成的宽度

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">这是自动完成的整个 template.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

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

1. 硬编码值

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

1. 使用变量

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

在带有绑定的 HTML 中使用它，

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

Answer 2

试试你的风格

/deep/ .mat-autocomplete-panel {

    min-width: 133px;

    max-width: 340px;//your desire width

    width: 100%;

}

使用/deep/时，你的风格在内部component css别人不，如果你在全球范围内风格用它stlye.scss