javascript - Angular 7 CSS在使用可重用组件时不起作用

Question

我对 Angular 相当陌生，并且来自 React.js 背景。

我制作了一个简单的网格组件，如下所示：

grid.component.js

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-grid',
  template: `
    <div [ngStyle]="styles()" [ngClass]="passClass">
      <ng-content></ng-content>
    </div>
  `,
  styles: [`
    div {
      display: flex;
    }
  `]
})
export class GridComponent implements OnInit {
  @Input() direction: string;
  @Input() justify: string;
  @Input() align: string;
  @Input() width: string;
  @Input() passClass: string;

  constructor() { }

  ngOnInit() {
  }

  styles() {
    return {
      'flex-direction': this.direction || 'row',
      'justify-content': this.justify || 'flex-start',
      'align-items': this.align || 'flex-start',
      ...(this.width && { width: this.width })
    };
  }
}

我想在其他组件中使用它，如下所示： aboutus.component.html

<app-grid passClass="about-us page-container">
  <app-grid direction="column" passClass="left">
    <div class="title blue bold">
      An open community For Everyone
    </div>
    <div class="large-desc grey">
      This conference is brought to you by
      the Go Language Community in
      India together with the Emerging
      Technology Trust (ETT). ETT is a non-
      profit organization, established to
      organize and conduct technology
      conferences in India. It’s current
      portfolio includes
    </div>
  </app-grid>
</app-grid>

aboutus.component.sass

.about-us
  position: relative
  .left
    width: 50%
    &:after
      bottom: 0
      right: 0
      z-index: 0
      margin-right: -5vw
      position: absolute
      content: url(../../assets/images/footer.svg)

但是，第二个组件附带的 CSS 不起作用。

我对 CSS 隔离有一点了解，但不明白它是否会影响这里。

PS：请随时对超出此问题范围的内容提供反馈。

标签： javascriptcssangularangular7

Answer 1

不能在模板中将 CSS 类作为变量传递。因此，如果您期望aboutus.component.html能够left在模板中将 CSS 类作为变量传递，那将行不通。

我可以指出几件事，希望对您有所帮助：

1. 如果要从组件外部修改组件内部的 CSS 类，一种选择是使用ng-deep。

2. 在您的特定情况下，我认为没有ng-deep必要。我建议将div元素放在app-grid组件中，而是使用@HostBinding装饰器将样式应用于宿主元素。使用这种方法，您可以完全放弃，passCss因为现在无论您在哪里使用app-grid组件，都可以使用选择器在 CSS 中设置该组件的样式app-grid。

   网格组件.ts：

   import { Component, OnInit, Input, HostBinding, SafeStyle } from '@angular/core';
   
   @Component({
     selector: 'app-grid',
     template: `<ng-content></ng-content>`,
     styles: [`
       :host {
         display: flex;
       }
     `]
   })
   export class GridComponent implements OnInit {
     @Input() direction: string;
     @Input() justify: string;
     @Input() align: string;
     @Input() width: string;
   
     constructor(private sanitizer:DomSanitizer) { }
   
     ngOnInit() {
     }
   
     @HostBinding('style')
     styles(): SafeStyle {
       const styles = `
         flex-direction: ${this.direction || 'row'};
         justify-content: ${this.justify || 'flex-start'};
         align-items: ${this.align || 'flex-start'};
      `;
       return this.sanitizer.bypassSecurityTrustStyle(styles);
     }
   }
   

   aboutus.component.sass：

     app-grid {
       // You can style the host element of a component
       // just like any native HTML element and without
       // needing to use `ng-deep`
     }
   

3. 您可能还想查看CSS 自定义属性。自定义 CSS 属性不受视图封装的屏蔽。如果愿意，这使您能够为组件创建 CSS API，并且这些属性可以在组件内的任何位置使用。

   aboutus.component.sass

   app-grid {
     --image: url(../../assets/images/footer.svg)
   }
   

   grid.component.sass

   div {
     content: var(--image);
   }