在不同的父组件中时，子组件的样式也不同

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演示link供您参考

---

OR 如果要通过子组件控制样式，可以通过指定 ：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 {}