使用可重用组件时,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:请随意向范围之外的事情提供反馈.

Answer 1

无法将 CSS 类作为模板中的变量传递。因此，如果您的期望aboutus.component.html是能够将leftCSS 类作为模板中的变量传递，那么这是行不通的。

我可以指出一些希望能有所帮助的事情：

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);
     }
   }
   

   关于我们的组件.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，并且这些属性可以在组件内的任何位置使用。

   关于我们.组件.sass

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

   网格组件.sass

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