从组件内部将 CSS 样式应用到 angular 组件

Question

如果我使用以下 html 在 angular 中创建一个非常简单的组件：

<div [ngStyle]="{ 'grid-column-start':  colStart }" >
  testing
</div>

组件打字稿文件包含 1 个输入

  @Input() colStart: number;

我想在 css 网格中使用组件，但是当组件在 dom 中呈现时，它被包装在组件的元素中

<app-test-component _ngcontent-fsq-c305="" _nghost-fsq-c298="" ng-reflect-col-start="3">
    <div _ngcontent-fsq-c298="" ng-reflect-ng-style="[object Object]" style="grid-column-start: 3;">
        testing
    </div>
</app-test-component>

所以在上面的示例中，我试图将组件定位在网格中，但它不起作用，因为 css 属性在 div 而不是组件。

我该如何解决这个问题？

我创建了这个 StackBlitz 来演示这个问题：

Example

谢谢

Answer 1

组件样式在 Angular 中有一些特殊的选择器，例如 :host 和 :host-context 或 [ngClass] 的强大功能。

.col-3 {
    grid-column-start: 3
}

<app-test-component [ngClass]="col-3">
        
</app-test-component>

强烈推荐阅读https://angular.io/guide/component-styles

Answer 2

你的grid-item-component可以像

<div class="grid-item">
  <ng-content></ng-content>
</div>


export class GridItemComponent implements OnInit {
  @Input() set colStart(value:number)
  {
    this.el.nativeElement.style['grid-column-start']=value
  }

  constructor(private el:ElementRef) {}

  ngOnInit() {
  }
}

从组件内部将 CSS 样式应用到 angular 组件

Apply CSS style to angular componet from within the component

ng-style

angular-components

angular