gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 00:29:38 28 4
gpt4 key购买 nike

在 Angular 5 应用程序中,当子组件位于下面的不同父组件列表中时,我希望它的样式略有不同。
例如,列表组件下卡片的红色背景
列表详情组件下卡片的绿色背景
我想知道是否可以通过子组件中的scss来完成?因为我认为在子组件本身内部执行它会更容易跟踪。

<listing>
<card />
<listing/>
<listingDetail>
<card />
</listingDetail>
谢谢。

最佳答案

您可以使用 Angular 的 ng-深如果要影响其子组件的样式。

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供你引用

Demo

如果你想从子组件控制样式,你可以通过指定 来实现。 :主机上下文和 parent 的类(class)。

示例:

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

关于angular - 当子组件在不同的父组件中时,它的样式不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53404870/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com