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

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