:: ng-deep меняет стиль других компонентов - PullRequest
Новая
       13

:: ng-deep меняет стиль других компонентов

0 голосов
/ 27 января 2020

Я использую файл .md для отображения информации в диалоговом окне из материала для Angular. Дело в том, что таблицы в файлах уценки, когда они отображаются в 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, на моем столе не применяется стиль, поэтому я вынужден его использовать. Это работает нормально, моя таблица теперь имеет границы, но влияет на другие мои компоненты, как это исправить?

РЕДАКТИРОВАТЬ: это мой шаблон:

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

1 Ответ

1 голос
/ 27 января 2020

Ответ - добавить родительский класс в диалог и использовать ::ng-deep для применения стилей только для этого компонента

Вы можете добавить класс в диалог, как показано ниже 

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

Объяснение : диалоговое окно материала является динамическим c компонентом

Stati c компонентом HTML

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

Stati c компонент CSS

table[_ngcontent-c0] { ... }

Dynami c компонент HTML

<table>...</table>

Dynami c компонент CSS

table { ... }

Обратите внимание на разницу для атрибута компонента stati c _ngcontent-c0, добавленного angular, Angular используйте этот Techni c для создания определенных c стилей компонента (чтобы применить стили для этого конкретного компонента), но для динамического c компонента атрибут не добавляется. По этой причине ваши стати c стили компонентов не применяются к динамичному c компоненту

Чтобы сделать эту работу, мы использовали ::ng-deep перед тем, как какой-либо класс удалил этот атрибут _ngcontent-c0 и выберите динамический c компонент, , чтобы при использовании ::ng-deep ваши стили больше не указывались для компонента c (он будет применяться ко всем компонентам). По этой причине мы используем родительский класс для применять стили только для этого компонента и динамически создаваемого компонента.

...