Angular - 继承父样式的子组件（不透明度）

Question

我想知道是否有办法阻止 Angular 子组件继承父样式，主要是不透明度。

我有一个位于页面顶部的表单包装器，如下所示：

import {Component, EventEmitter, Output} from "@angular/core";

@Component({
  selector: 'new-student-form-wrapper',
  templateUrl: './new-student-form-wrapper.component.html',
  styleUrls: ['./new-student-form-wrapper.component.scss']
})
export class NewStudentFormWrapperComponent {

  @Output() public onNewStudentFormClose: EventEmitter<void> = new EventEmitter<void>();

  public newStudentFormCloseClicked(): void {
    this.onNewStudentFormClose.emit();
  }

}

::ng-deep {
  .student-details-form {
    opacity: 0;
  }
}

.new-student-form-wrapper {
  z-index: 50;
  height: 100vh;
  width: 100vw;
  position: absolute;
  background-color: white;
  opacity: 0.8;

  .c-pointer {
    cursor: pointer;
  }
}

<div class="new-student-form-wrapper p-4">
  <mdb-icon class="c-pointer d-flex close-icon" (click)="newStudentFormCloseClicked()" fas icon="times"></mdb-icon>
  <new-student-form></new-student-form>
</div>

使用实际包含表单行为的子组件：

import {Component} from "@angular/core";

@Component({
  selector: 'new-student-form',
  templateUrl: './new-student-form.component.html',
  styleUrls: ['./new-student-form.component.scss']
})
export class NewStudentFormComponent {

}

.student-details-form {
  opacity: 1;
  background-color: purple; /** Just to test opacity*/
}

<div class="student-details-form md-form input-group d-flex flex-column">
  <div class="form-header">
    <h1>Hello</h1>
  </div>
</div>

然而，尽管实际上明确声明 new-student-form.component 的不透明度为 0，但它仍然采用容器的 0.8 不透明度规则。

我肯定使用 ng-deep 错误，为孩子消除不透明度的最佳方法是什么？有没有我可以用来阻止样式泄漏到另一个组件中的封装规则？

Answer 1

不透明度适用于整个元素，包括其内容，即使该值不被子元素继承。因此，元素及其子元素相对于元素的背景都具有相同的不透明度，即使它们彼此之间具有不同的不透明度。

不完全确定它是否会为您提供您期望的结果，但要定义透明背景，您可以在背景上使用rgba：

.new-student-form-wrapper {
  z-index: 50;
  height: 100vh;
  width: 100vw;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
}

因为看起来你使用的是scss，所以你也可以使用transparentize实用函数：

background-color: transparentize(white, 0.2)

这样表单包装器仍然有点透明，但任何子内容都会清晰可见

---

顺便说一句，这确实不是使用::ng-deep 的正确方式。虽然这是一种使用方式。您现在的编写方式将针对您的文档中具有类.student-details-form 的任何元素。要仅定位当前组件的后代，您需要添加 :host 选择器：

:host ::ng-deep {
  .student-details-form {
    // style here
  }
}

为了更好地解释::ng-deep，我将仅使用一些示例。基本上::ng-deep 所做的是它不会将_ngcontent-xxx-xxxx 属性选择器添加到发出的css。 （当您使用 ViewEncapsulation.Emulated 时会发生这种情况，因此只会在组件样式表中执行某些操作）。

Soo，如果您的组件 scss 中有以下内容：

::ng-deep {
  .form0 {
    opacity: 0;
  }
}

:host ::ng-deep {
  .form1 {
    opacity: 0.1
  }
}

:host {
  .form2 {
    opacity: 0.2;
  }
}

.form3 {
  opacity: 0.3;
}

.form-wrapper ::ng-deep {
  form4 {
    opacity: 0.4;
  }
}

这将导致如下结果：

.form0 {
  opacity: 0;
}

[_nghost-xxx-xxxx] .form1 {
  opacity: 0.1;
}

[_nghost-xxx-xxxx] .form2[_ngcontent-xxx-xxxx] {
  opacity: 0.2;
}

[_ngcontent-xxx-xxxx].form3 {
  opacity: 0.3;
}

.form-wrapper[_ngcontent-xxx-xxxx] .form4 {
  opacity: 0.4;
}

如您所见，如果您在根目录上使用::ng-deep，则它是没有（模拟）封装的css。通过主机和内容属性选择器模拟封装