假设我有一个像这样的组件，其中包含显示或隐藏组件内部内容的逻辑：
@Component({
selector: 'hello',
template: `<div *ngIf="visible"> <h1>Hello {{name}}!</h1></div>`,
styles: [`h1 { font-family: Lato; } div { border: 1px solid blue }`]
})
export class HelloComponent {
@Input() name: string;
visible: boolean;
ngOnInit() {
this.visible = this.name === "Stranger"
}
}
我在另一个组件中像这样使用它：
<div class="container">
<hello class='hello-class' name="Stranger"></hello>
<!-- This will not be visible -->
<hello class='hello-class' name="Not stranger"></hello>
</div>
我将一些样式应用于这样的hello组件：
.hello-class {
display: block;
margin-bottom: 80px;
}
由于hello组件中的条件，组件的第二次使用将不可见。但是，即使该组件不可见，我添加的样式也hello-class将应用于该组件。
我无法移动条件以将组件显示/隐藏到父对象。所以我不能*ngIf在组件之前做一个。
仅当组件可见时，有什么方法可以应用此样式？
这是一个说明问题的stackblitz链接：https ://stackblitz.com/edit/angular-ivy-mfrb7j
由于没有子级，因此可以使用css选择器执行此操作：
.hello-class:not(:empty) {
display: block;
margin-bottom: 80px;
}
通过使用:not(:empty)它检查元素（组件的宿主元素）是否具有子元素。如果没有孩子，则样式将不适用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句