Question

我想从子组件中更改app组件（父组件）的背景。

假设我有两组组件，一组是主要组件，可以直接从app访问组件菜单和其他组是辅助组件，将从主组件菜单/链接访问。所以我想在此基础上根据加载的主要和辅助组件更改应用程序组件背景

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

Answer 1

您应该在子组件中使用styles属性，并使用指定背景颜色的div元素包装内容。

危机中心儿童组成

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

})

HEROS LIST CHILD COMPONENT

@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} `]
})

<强> UPDATED PLUNK

Answer 2

您可能需要考虑使用shared service进行此类亲子沟通。

父母可以订阅该服务，孩子在加载时推送背景样式等信息（通过ngOnInit）

另一种方法是让父组件通过ContentChildren访问子组件，以确定将背景更改为哪种颜色。

从任何子组件更改应用程序组件样式 - Angular 2

2 个答案: