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

Если вы хотите стилизовать некоторый элемент в другом компоненте, используйте модификаторы :host и /deep/ (устарело - Альтернатива / deep / ).Подробнее об этой функции вы можете прочитать в документации

В вашем случае это должно работать:

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

Вы также можете отключить инкапсуляцию для этого компонента:

@Component({
  selector: 'app-grid',
  template: `
    <div [ngStyle]="styles()" [ngClass]="passClass">
      <ng-content></ng-content>
    </div>
  `,
  styles: [`
    div {
      display: flex;
    }
  `],
  encapsulation: ViewEncapsulation.None
})

Answer 2

Невозможно передать классы CSS как переменные в вашем шаблоне.Так что если вы ожидаете, что в aboutus.component.html будет возможность передать CSS-класс left в качестве переменной в вашем шаблоне, это не сработает.

Есть несколько вещей, на которые я могу указать, которые, надеюсь, будутhelp:

1. Если вы хотите изменить класс CSS, который является внутренним по отношению к компоненту, вне этого компонента, одним из вариантов является использование ng-deep .

2. В вашем конкретном случае я не думаю, что ng-deep необходимо.Я бы предложил удалить элемент div в компоненте app-grid и вместо этого применить стили к элементу host, используя декоратор @HostBinding.При таком подходе вы можете полностью удалить passCss, потому что теперь, где бы вы ни использовали свой компонент app-grid, вы можете стилизовать этот компонент в CSS с помощью селектора app-grid.

   grid.component.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);
   }