ngClass 不使用绑定从 .scss 应用样式

Question

我的问题是 sm-input-text.component，它没有使用绑定 page-input-text.component.scss 应用样式strong>[cssClass] 输入。 但价值就在那里。

我有两个组件：

- 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 中，则会应用并显示它！ 我只想在 page-input-text.component 的 ma​​tInput 上添加样式。 我在这里错过了什么？

Answer 1

因为 Angular 有 View Encapsulation，所以不能将 child 的 CSS 样式类添加到 parent，除非它的两个封装都设置为 ViewEncapsulation.None。您应该在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