angular - 有没有办法以 Angular Material 形式显示带有标签的静态文本，其样式类似于输入，以便它们共享排版？

Question

我正在用 Angular Material 构建一个表单。在某些地方，我想包含静态文本和一个样式类似于表单输入的标签，除了没有交互性和没有下划线，像这样。



我已经能够将其与自定义类一起破解:

      <mat-form-field floatLabel="always" class="static-text">
        <input matInput disabled placeholder="My Label" value="My Text" />
      </mat-form-field>

      .static-text {

        :disabled {
          color: black;
        }

        ::ng-deep .mat-form-field-underline {
          display: none;
        }
      }

但是，我必须同时包含 disabled属性和自定义类。我还尝试仅使用带有内置 Angular Material 排版类的静态文本元素，但这些元素显示不正确，因为没有将它们包裹起来的 mat-form-field 元素。

<div>
    <p class="mat-caption">My Label</p>
    <p class="mat-body">My Text</p>
</div>

实际上是否有内置的方法来做到这一点，或者其他标准实现？

Answer 1

你可以做另一个简单的黑客攻击
在 Angular Material 中有许多按钮类型，您可以选择您选择的垫子按钮，并且可以将 css 属性应用为 pointer-events: none;这将作为您想要的简单标签..!!