时间戳

首页 > 解决方案 > 子组件在不同父组件中时的样式不同

angular - 子组件在不同父组件中时的样式不同

问题描述

在 Angular 5 应用程序中，当子组件位于下面的不同父组件列表中时，我希望子组件的样式略有不同。

例如列表组件下卡片的红色背景
列表详细信息组件下的卡片绿色背景

我想知道我是否可以通过子组件中的 scss 来做到这一点？因为我认为在子组件本身内部进行跟踪会更容易。

<listing>
  <card />
<listing/>
<listingDetail>
  <card />
</listingDetail>

谢谢。

标签： angularsassangular-components

解决方案

如果你想影响其子组件的样式，你可以使用 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 {}

推荐阅读