子组件的css会影响整个页面

发布于06月23日

我有一页，这页被一分为二.页面的一部分是child1，另一部分是child2.

等级制度

Parent
   Child1
   Child2

下面是页面中包含的css

Child1 ->   z-index: 1
Child2 ->   z-index: 2

我想在点击child1中的按钮时为整个页面提供背景.Css如下

.backdrop {
    position: fixed;
    background-color: rgba(16,19,22,.6);
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

但这只涉及child1组件.我希望它能覆盖整页.

事件emits 器

最好不要反对Angulars样式的封装，只需向父级抛出一个事件，让它处理样式.

在子组件脚本中:

@Output() styleEvent = new 事件emits 器();

onClick() {
  this.styleEvent.emit();
}

子组件模板:

<button (click)="onClick()">Add Style</button>

在父脚本中:

styleOn = false

handleStyleEvent() {
  this.styleOn = !this.styleOn
}

getStyle() {
  return this.styleOn ? 'backdrop' : ''
}

在父模板中:

<div [ngClass]="getStyle()">
  <app-one (styleEvent)="handleStyleEvent()"></app-one>
  <app-two></app-two>
</div>

You can add the styling to your parent stylesheet (or 100 if you want it to be globally available).

这里有一个关于Stackblitz的例子.

实用课程推荐