我的问题是 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 上添加样式。 我在这里想念什么?
答案 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