如果您正在使用Angular9并在组件的HTML文件中使用内联样式插值,并且发现它们不起作用,则可以执行以下操作解决问题:
首先,请确保在组件类中定义了要插入的样式属性,例如:
@Component({
selector: 'app-example',
template: 'Some text',
})
export class ExampleComponent {
myColor = 'red';
}
有时,您可能需要在样式中使用变量,以方便在整个组件中重复使用。如果您要使用变量,请确保在组件文件中导入和定义它们。例如:
@Component({
selector: 'app-example',
template: `
Some text
Some more text
`,
styles: [`
:host {
--primary-color: red; /* define variable */
}
`],
})
export class ExampleComponent {
myColor = 'var(--primary-color)'; /* use variable */
myTextColor = 'blue'; /* use regular property */
}
如果您仍然遇到问题,则可以尝试禁用Angular的ViewEncapsulation,以允许在组件样式中使用全局CSS变量。例如:
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css'],
encapsulation: ViewEncapsulation.None, /* disable view encapsulation */
})
export class ExampleComponent {
myColor = 'var(--primary-color)';
}
请注意,禁用封装视图可能会导致样式泄漏,并且应谨慎使用。