Question

在角形材料和输入组件（matInput）上，如何修改打字稿中所有输入的样式？

我正在尝试这种方式，但是它只会修改第一个元素。

ngAfterViewInit () {
    const matlabel = this.elRef.nativeElement.querySelector ('.mat-form-field-label');
    matlabel.style.color = 'white';
  }

====================

<form [formGroup]="form" (ngSubmit)="login()">
      <table cellspacing="0" class="tb-login">
        <tr>
          <td>
            <mat-form-field class="form-login">
              <input matInput type="text" placeholder="Login" formControlName="login"  class="input-login"/>
            </mat-form-field>
          </td>
        </tr>
        <tr>
          <td>
            <mat-form-field  class="form-login">
              <input matInput type="password" placeholder="Password" formControlName="password"   class="input-login"/>
            </mat-form-field>
          </td>
        </tr>
        <tr>
          <td>
            <button mat-raised-button type="submit" class="btn_login">Login</button>
          </td>
        </tr>
      </table>
    </form>

Angular v7 材质角v7

我将感谢您的建议。

Answer 1

将Renderer2与ViewChild一起使用。

Renderer2提供了平台无关的API来修改DOM，并且应与本机document的API相对使用。

您可以将Renderer2作为依赖项注入到Component中，然后在其上调用setStyle方法，并传递要设置样式的元素，即样式名称（'background' ）和它的值（例如我的{red）。

在这里，尝试一下：

import { Component, ViewChild, Renderer2 } from '@angular/core';
import { MatInput } from '@angular/material/input';

@Component({...})
export class InputOverviewExample {

  @ViewChild('food') matInput: MatInput;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    this.renderer.setStyle(this.matInput.nativeElement, 'background', 'red');
  }

}

然后在您的模板中，创建模板变量，就像我在input标签上创建的那样，将其命名为food。这就是我在@ViewChild('food')中使用的：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #food matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

这是您推荐的Working Sample StackBlitz。

样式输入材料角度

1 个答案: