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 class 作为模板中的变量传递。因此，如果您在 aboutus.component.html 中的期望是能够将 left CSS class 作为模板中的变量传递，那是行不通的。

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

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

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

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`
  }

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

aboutus.component.sass
```
app-grid {
  --image: url(../../assets/images/footer.svg)
}
```
grid.component.sass
```
div {
  content: var(--image);
}
```

Answer 2

如果您想要在其他组件中设置某些元素的样式，请使用 :host 和 /deep/ 修饰符（已弃用 - Alternative to /deep/). More about this feature you can read in documentation

在你的情况下，这应该有效：

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

Angular 7 CSS 在使用可重用组件时不工作

Angular 7 CSS not working while using reusable component

javascript

css

angular

angular7