::ng-deep 更改其他组件样式

Question

我正在使用 .md 文件在来自 Material 的 Angular 的对话框中显示信息。问题是降价文件中的 tables，当它们显示在 DOM 中时，没有边框。所以我尝试添加一些 css.

::ng-deep table {
  border-collapse: collapse;
  border-spacing: 0;
  border:2px solid black;
}

::ng-deep th {
  border:2px solid black;
}

::ng-deep td {
  border:1px solid black;
}

如果不添加::ng-deep，我的table就没有样式，所以我不得不使用它。它工作正常，我的 table 现在有边框但是它影响了我的其他组件，如何解决这个问题？

编辑：这是我的模板：

<div markdown [src]="data"></div>

Answer 1

Answer is add parent class to dialog and use ::ng-deep to apply styles for that component only

您可以将 class 添加到对话框中，如下所示

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {name: this.name, animal: this.animal},
      panelClass: 'my-parent-class'
});

并将样式添加为

.my-parent-class ::ng-deep table {
  border-collapse: collapse;
  border-spacing: 0;
  border:2px solid black;
}

.my-parent-class ::ng-deep th {
  border:2px solid black;
}

.my-parent-class ::ng-deep td {
  border:1px solid black;
}

说明：Material对话框是一个动态组件

静态组件HTML

<table _ngcontent-c0>...</table>

静态组件CSS

table[_ngcontent-c0] { ... }

动态分量HTML

<table>...</table>

动态分量CSS

table { ... }

注意静态组件属性 _ngcontent-c0 的区别由 angular 添加，Angular 使用此技术创建组件特定样式（为该特定组件应用样式），但是对于动态组件，没有添加任何属性。 这就是您的静态组件样式未应用于动态组件的原因

为了完成这项工作，我们在任何 class 之前使用 ::ng-deep 来删除该属性 _ngcontent-c0 和 select 动态组件，所以当 ::ng-deep 用于您的样式不再特定于组件（它将应用于所有组件）。 这就是我们使用父级 class 仅为该组件和动态创建的组件应用样式的原因也是。

Answer 2

希望我已经清楚地理解了您的问题。如果您试图在不影响所有其他组件的情况下影响子组件的样式，请在 ::ng-deep 之前使用 :host。

:host ::ng-deep .my-class

这只会更改您更改样式的组件中的样式。

::ng-deep 更改其他组件样式

::ng-deep changes other components style

css

markdown

components

border