如何使用角形材料形式场和弹性布局

Question

我想在一行中有2个表单输入字段： 1.首先有一个固定的 1.第二个应该增加和缩小，但是不会缩小到180px以下。

这里是完整的stack-blitz example

启动应用程序时，我们会看到此

还有可能是另一个问题：
我认为第二个输入字段应该已经显示了提示文本和水平线-但只有在获得焦点时才会显示它。
这是预期的行为还是我错过了什么？

无论如何。主要问题是第二个字段不会像预期的那样缩小。它不会缩小到180px以下：

在chrome开发工具中，我可以看到input元素被div class="mat-form-field-infix">包装，并且类mat-form-field-infix的固定宽度为180px！

我想到的唯一解决方法是使用 ::ng-deep 覆盖此宽度。
您可以在Stackblitz示例的co-input-field.component.scss文件中激活它

:host ::ng-deep .mat-form-field-infix {
  // width: auto !important;
  width: unset !important;
}

通过这种解决方法，第二个输入将按预期缩小：

但是::ng-deep is deprecated将被删除。
因此，什么是正确的方法，以使输入收缩到预期范围？

Answer 1

由于.mat-form-field-infix的固定宽度为180px，因此无法将表单字段缩小到180px以上。不可避免地，.mat-form-field-infix必须被覆盖。

您可以通过:: ng-deep两种方法获得相同的结果；

1。禁用该特定组件的视图封装。但是，这种方法有一个很大的缺点，即组件中的所有样式都变为全局样式，因此需要仔细管理。

@Component({
    selector: 'app-co-input-field',
    templateUrl: './co-input-field.component.html',
    styleUrls: ['./co-input-field.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class CoInputFieldComponent {}

然后在co-input-field.component.scss中执行以下操作

app-co-input-field {
    .mat-form-field-infix {
      width: auto !important;
    }
    // all other component styles goes in here
    // in order to keep them isolated from global scope
}

2。不要禁用视图封装。以全局样式使用父组件的元素选择器。

在styles.scss

中输入以下内容

app-co-input-field {
    .mat-form-field-infix {
      width: auto !important;
    }
    // co-input-field.component.scss still can be used for encapsulated styles
}

3。不要禁用视图封装。为这种特殊情况定义全局规则。

在styles.scss

中输入以下内容

.shrinking-mat-form-field {
    .mat-form-field-infix {
      width: auto !important;
    }
}

并将.shrinking-mat-form-field类应用于相应的元素

<mat-form-field style="width: 100%" class="shrinking-mat-form-field">
  <input matInput placeholder="placeholder"  />
  <mat-hint align="end">hint text</mat-hint>
</mat-form-field>

尽管第二种方法和第三种方法在根本上是相同的，但我个人更喜欢第三种方法，以使其更具可读性，在项目中保持一致，副作用最小并从一个角度进行管理。