0

Добрый день! Разбираясь в Angular 2 потребовалось вывести список элементов на экран пользователя.

<campaigns>
    <campaign *ngFor="let campaign of campaigns"></campaign>
</campaigns>

И надо чтобы каждый не четный элемент изменял свой цвет с белого на серый.
Раньше при простой верстке я использовал псевдокласс :nth-of-type(odd). Который сам делал каждый нечетный элемент нужно мне цвета(например). Но для компонентов это почему то не работает.
Я могу конечно сделать:

<campaigns>
   <campaign *ngFor="let campaign of campaigns; let i = index" [background]="i % 2 == 0 'green':'white'"></campaign>
</campaigns>

Но мне кажется что этот подход костыльный.
В связи с чем вопрос как передать внутрь компонента информацию из css родительского контейнера.

Код css campaigns

campaign:nth-of-type(odd) {
   background: #f2f2f2;
}

Код сss и html campaign

<div class="campaign">
<div class="inlineBlock videoContainer">
    <video width="100%" controls="controls" preload="metadata">
        <source src="http://a-media.pro/videos/1479360662.mp4">
    </video>
</div>
<div class="inlineBlock leftContainer">
    <a class="campaignName text-top" [routerLink]="['/campaigns', campaign.id]">{{campaign.name}}</a><br/>
    Показов по плану - {{campaign.countShow}}<br/>
    Комплексов - {{campaign.countDevice}}
    <div class="bottom">Тип проката <span class="text-bottom">«{{campaign.methodName}}»</span></div>
</div>
<img src="/images/line.png" class="inlineBlock" style="margin-top: 8px">
<div class="inlineBlock rightContainer">
    <div class="text-top">
        {{campaign.budget}} р.
    </div>
    c {{campaign.start | date: 'dd.M.y' }}<br/>
    до {{campaign.end | date: 'dd.M.y' }}
    <div class="bottom right"><span class="text-bottom">{{campaign.statusName}}</span></div>
</div>

.campaign {
  width: 100%;
  height: 190px;
  padding: 17px 0;
  color: #000000;
  font-size: 16px;
  font-family: "Segoe UI", sans-serif;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}
7
  • сделай минимальный воспроизводимый пример чтобы можно было увидеть что и почему у тебя не работает
    – Grundy
    10 фев 2017 в 10:32
  • Не правильно оформил вопрос код пропал. Как раз правил)
    – Vyacheslav
    10 фев 2017 в 10:34
  • Но для компонентов это почему то не работает. - почему ты думаешь, что не работает? как ты пробовал? какие стили использовал? как использовал? что у тебя за компоненты?
    – Grundy
    10 фев 2017 в 10:37
  • минимальный воспроизводимый пример подразумевает минимальный код, который можно запустить и увидеть проблему.
    – Grundy
    10 фев 2017 в 10:38
  • Не работает потому что цвет всегда белый, а не серый(на не четных элементах). Сейчас добавлю ещё разметку контейнеров
    – Vyacheslav
    10 фев 2017 в 10:41

1 ответ 1

0

Разобрался как это делается. Надо было просто использовать /deep/(>>> тоже самое)

campaign:nth-of-type(odd) >>> .campaign {
   background: #f2f2f2;
}

Как пишет Grundy и на просторах интернета /deep/ и >>> являются устаревшими и не должны работать(хотя у меня они работают). Нашел в документации Angular 2 про view-encapsulation: https://angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation И у компонента campaigns выставил encapsulation: ViewEncapsulation.None и сделал такой css

campaign:nth-of-type(odd) .campaign {
   background: #f2f2f2;
}

Получился тот же результат.

4

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.