web-dev-qa-db-ja.com

Angular 7再利用可能なコンポーネントの使用中に7 CSSが機能しない

私は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)

ただし、2番目のコンポーネントに付属しているCSSは機能しません。

私はCSS分離について少し知っていますが、それがここに影響するかどうか理解できませんでした。

追伸：この質問の範囲外の事柄についても、遠慮なくフィードバックを提供してください。

javascriptcssangularangular7
5
Tolsee

他のコンポーネントの一部の要素をスタイルする場合は、: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
})
1
Krzysztof Raciniewski