ngClass не применяет стиль из .scss, используя привязку - PullRequest
Новая
       32

ngClass не применяет стиль из .scss, используя привязку

0 голосов
/ 01 марта 2019

Моя проблема связана с sm-input-text.component , не применяется стиль из page-input-text.component.scss с использованием bind [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 , он будет применен и покажет его!Я хочу добавить стиль только для matInput из page-input-text.component. Что мне здесь не хватает?

1 Ответ

0 голосов
/ 01 марта 2019

Поскольку Angular имеет Просмотр инкапсуляции , вы не можете добавить класс стилей CSS дочернего элемента к родительскому, если для обеих его инкапсуляций не установлено значение 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

...