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 隔离有一点了解，但不知道它是否会影响到这里。

P.S.:请随时对超出此问题范围的事情提供反馈。

Answer 1

不可能将 CSS 类作为模板中的变量传递。因此，如果您的期望是 aboutus.component.html是为了能够通过 left CSS 类作为模板中的变量，这将不起作用。

我可以指出一些希望对您有所帮助的事情:

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

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

   网格组件.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);
     }
   }
   

   关于我们.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 Custom Properties .自定义 CSS 属性不受 View 封装的屏蔽。如果愿意，这使您能够为组件创建 CSS API，并且这些属性可以在组件内的任何位置使用。

   关于我们.component.sass

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

   网格组件.sass

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