Изменить стиль компонента приложения из любого дочернего компонента - Angular 2

Я хочу изменить фон компонента приложения (родительского компонента) из дочернего компонента.

Допустим, у меня есть две группы компонентов, одна группа будет основным компонентом, доступ к которому осуществляется напрямую из меню компонентов приложения, а другая группа является вторичным компонентом, доступ к которому будет осуществляться из меню/ссылки основного компонента. поэтому здесь я хочу изменить фон компонента приложения на основе загруженных основных и дополнительных компонентов.

https://plnkr.co/edit/t97ZyDz9wfGuPEzuo8J3?p=preview

app.component.css

.page-background
{
     background-color:#FFF0F5;
}
.page-background-hero
{
    background-color:white;
}
.page-background-crisis
{
    background-color:wheat;
}

angular angular2-template angular2-routing
person Max_dev    schedule 02.02.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны использовать свойство стилей в дочернем компоненте и обернуть содержимое элементом div, указав цвет фона.

ДЕТСКИЙ КОМПОНЕНТ КРИЗИСНОГО ЦЕНТРА

@Component({
  template:  `
    <div class="red">
        <h2>CRISIS CENTER</h2>
        <router-outlet></router-outlet>
    </div>
  `,
  directives: [RouterOutlet],
  providers:  [CrisisService],
  styles:[`.blue{background-color:red} `]

})

ДЕТСКИЙ КОМПОНЕНТ СПИСКА ГЕРОЕВ

@Component({
  template: `
  <div class="yellow">
        <h2>HEROES</h2>
        <ul>
          <li *ngFor="#hero of heroes"
            (click)="onSelect(hero)">
            <span class="badge">{{hero.id}}</span> {{hero.name}}
          </li>
        </ul>
  </div>
  `
    styles:[`.yellow{background-color:yellow} `]
})

ОБНОВЛЕННЫЙ ПЛАНК

person Aravind    schedule 03.02.2017
comment
Спасибо, мне нужно обновить стиль компонента приложения (родительский) - person Max_dev; 03.02.2017
comment
Да, в зависимости от загруженного дочернего компонента, стиль родительского компонента должен быть переключен - person Max_dev; 03.02.2017
comment
Я не могу понять ваш вопрос, пожалуйста, уточните - person Aravind; 03.02.2017
comment
Настройка фона компонента приложения на основе отображаемого дочернего компонента. - person Max_dev; 03.02.2017

arrow_upward
0
arrow_downward

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

Родитель может подписаться на службу, а дочерний элемент подталкивает информацию о стиле фона и т. д., когда он загружается (через ngOnInit)

Другой альтернативой может быть доступ родительского компонента к дочернему через ContentChildren, чтобы определить, на какой цвет изменить фон.

person Garth Mason    schedule 03.02.2017
comment
Спасибо, похоже, возможный ответ, попробую. - person Max_dev; 03.02.2017