Стиль дочернего компонента по-разному, когда он находится в разных родительских компонент

Question

В приложении Angular 5 я хочу, чтобы стиль ребенка немного отличался, когда он находится внутри другого списка родительских компонентов ниже.

Например, красный фон для карты в списке компонентов
зеленый фон для карты в спискеподробный компонент

Мне нужно, если я могу сделать это через scss в дочернем компоненте?Потому что я думаю, что было бы легче отследить это при выполнении самого дочернего компонента.

<listing>
  <card />
<listing/>
<listingDetail>
  <card />
</listingDetail>

Спасибо.

Answer 1

Вы можете использовать Angular ng-deep , если хотите влиять на стили его дочерних компонентов.

1.) На вашем ListingComponent настройте ng-deep и получите доступкласс контейнера карты

@Component({
  selector: 'listing',
  template: `<ng-content></ng-content>`,
  styles: [
    `
      :host ::ng-deep .card-container { background-color: red; }   // Keep in mind, to include :host which means this component as without it, this style will leak out affecting not only its child component class .card-container but also its siblings derived from another component
    `
  ]
})
export class ListingComponent {}

2.) На вашем ListingDetailComponent настройте ng-deep и получите доступ к классу контейнера карты

@Component({
  selector: 'listing-detail',
  template: `<ng-content></ng-content>`,
  styles: [
    `
       :host ::ng-deep .card-container { background-color: green; }
    `
  ]
})
export class ListingDetailComponent {}

3.) На вашем CardComponent, предположительно, у вас есть класс контейнера карты

@Component({
  selector: 'card',
  template: `<div class="card-container">Hi I'm Card</div>`,
})
export class CardComponent {}

4.) На вашем AppComponent, то же самое с вашей структурой

<listing>
  <card></card>
</listing>

<listing-detail>
  <card></card>
</listing-detail>

Вот демоверсия StackBlitz ссылка для справки

---

ИЛИ Если выЕсли вы хотите управлять стилем из дочернего компонента, вы можете сделать это, указав : host-context и класс родителя.

Пример:

1.) Укажите родительский класс, который мы будем использовать для доступа к нашему дочернему компоненту (карточке)

<listing class="list-parent">    
  <card></card>
</listing>

<listing-detail class="list-detail-parent">
  <card></card>
</listing-detail>

2.) В дочернем компоненте (CardComponent) укажите хост-контекст для своих стилей.Таким образом, вы можете стилизовать родительский компонент в соответствии с его классами.

@Component({
  selector: 'card',
  template: `<div class="card-container">Hi I'm Card</div>`,
  styles: [
    `
      :host-context(.list-parent) { background-color: red; }

      :host-context(.list-detail-parent) { background-color: green; }

    `
  ]
})
export class CardComponent {}