ngClass不会使用绑定应用.scss中的样式

时间:2019-03-01 10:59:02

标签: javascript angular typescript input material

我的问题是 sm-input-text.component ,它不应用 page-input-text.component.scss 中使用bind < strong> [cssClass] 输入。 但是价值在那里。

我有2个组成部分:

- sm-input-text.component.html
- sm-input-text.component.ts
- sm-input-text.component.scss
- page-input-text.component.html
- page-input-text.component.ts
- page-input-text.component.scss

我的代码如下:

sm-input-text.component.html:
i bind the [ngClass] <-> cssClass

    <mat-form-field [formGroup]="formGroup">
      <input
        matInput
        type="text"
        [placeholder]="placeholder"
        [formControlName]="fControlName"
        (input)="onInput($event)"

        [ngClass]="cssClass"
      >
    </mat-form-field>

page-input-text.component.html: i give value to the [cssClass]

    <form [formGroup]="formGroupOnlyOne">
        <sm-input-text
          #input1
          [formGroup]="formGroupOnlyOne"
          fControlName="input1"
          placeholder="InputText"

          [cssClass]="'no-selectable'"
        ></sm-input-text>
    </form>

page-input-text.component.scss:

    .no-selectable {
        cursor: auto;
        background: red;
    }

它不适用。但是,如果我在 sm-input-text.component.scss 中添加了“ no-selectable”样式,那么它将被应用并显示出来! 我只想在 page-input-text.component的 matInput 上添加样式。 我在这里想念什么?

1 个答案:

答案 0 :(得分:0)

因为Angular具有 View Encapsulation (查看封装),所以除非将二者的封装都设置为ViewEncapsulation.None,否则您不能将child的CSS样式类添加到parent。您应该在sm-input-text.component.scss中添加此类。或者您可以将其全局添加到您的styles.scss

styles.scss

.no-selectable {
    cursor: auto;
    background: red;
}

每当angular渲染一个组件时,它都会使用css中生成的属性选择器来更改css,使其与该组件单独匹配

例如

.no-selectable[ng-content23] {
    cursor: auto;
    background: red;
}

如果您想解决问题,可以将组件封装设置为ViewEncapsulation.None

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello World!</h1>
    <span class="red">Shadow DOM Rocks!</span>
  `,
  styles: [`
    :host {
      display: block;
      border: 1px solid black;
    }
    h1 {
      color: blue;
    }
    .red {
      background-color: red;
    }

  `],
  encapsulation: ViewEncapsulation.None
})
class MyApp {
}

您应将ViewEncapsulation.None分别设置为 sm-input-text.component.ts,page-input-text.component.ts