Question

因此，当我理想地单击第一个箭头时，我想将其全部涂成红色并禁用其他div。但是因为它是箭头，所以我只能给箭头的：before和：after部分之前的部分上色。

这是HTML，CSS和TS代码示例。我正在使用Renderer2将样式设置为div动作。

https://stackblitz.com/edit/angular-5tuus2这是堆叠闪电战。

有人有什么主意吗？

HTML

    <div class="firstArrow" #arrowOne (click)='firstArrowClick()'></div>
    <div class="secondArrow" #arrowTwo></div>
    <div class="thirdArrow" #arrowThree></div>

CSS

   .firstArrow {
    position: relative;
    background: rgb(0, 82, 48);
    text-align: center;
    margin-right: 10px;
    margin-left: 0px;
    height: 50px;
    width: 330px;
   float: left;
   z-index: 3;
  }
  .firstArrow:before {
   content: '';
   position: absolute;
   width: 20px;
   height: 50%;
   left: 100%;
   top: 0;
   background: linear-gradient(
    to right top,
    rgb(0, 82, 48) 50%,
    transparent 50%
   );
  }

  .firstArrow:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 50%;
    left: 100%;
    bottom: 0;

    background: linear-gradient(
     to right bottom,
     rgb(0, 82, 48) 50%,
     transparent 50%
     );
  }

 .secondArrow {
   position: relative;
   background: skyblue;
   margin-right: 10px;
   padding-left: 50px;
   padding-top: 7px;
   left: -20px;
   float: left;
   z-index: 2;

   height: 50px;
   width: 330px;
  }
 .secondArrow:before {
   content: '';
   position: absolute;
   width: 20px;
   height: 50%;
   left: 100%;
   top: 0;
   background: linear-gradient(
     to right top,
     skyblue 50%,
     transparent 50%
  );
 }

 .secondArrow:after {
   content: '';
   position: absolute;
   width: 20px;
   height: 50%;
   left: 100%;
   bottom: 0;
   background: linear-gradient(
    to right bottom,
    skyblue 50%,
    transparent 50%
  );
 }
.thirdArrow {
   position: relative;
   background: rgb(0, 82, 48);
   text-align: center;

   padding-top: 7px;
   height: 50px;
   width: 330px;

   left: -40px;
   float: left;
   z-index: 1;

 }

 .thirdArrow:after {
   content: '';
   position: absolute;
   width: 20px;
   height: 50%;
   left: 100%;
   bottom: 0;
   background: linear-gradient(
     to right bottom,
     rgb(0, 82, 48) 50%,
     transparent 50%
   );
 } 
 .thirdArrow:before {
   content: '';
   position: absolute;
   width: 20px;
   height: 50%;
   left: 100%;
   top: 0;
   background: linear-gradient(
     to right top,
     rgb(0, 82, 48) 50%,
     transparent 50%
  );
 }


TS

  export class WizardComponent{

     @ViewChild("arrowOne", {static: false}) arrowOne: ElementRef;
     @ViewChild("arrowTwo", {static: false}) arrowTwo: ElementRef;
     @ViewChild("arrowThree", {static: false}) arrowThree: ElementRef;

     constructor(private renderer: Renderer2) {}


     firstArrowClick(){
        this.renderer.setStyle(this.arrowOne.nativeElement, 'background', 
        'red');
     }

  }

Answer 1

除了使用样式，您还可以使用渲染器添加一些类，例如

firstArrowClick(){
    this.renderer.addClass(this.arrowOne.nativeElement,'active')
  }

然后使用此类更改背景，然后将以下内容添加到您的CSS

.firstArrow.active::before{
  background: linear-gradient(
    to right top,
    red 50%,
    transparent 50%
  );
}
.firstArrow.active::after{
  background: linear-gradient(
    to right bottom,
    red 50%,
    transparent 50%
  );
}
.firstArrow.active{
  background: red;
}

Stackblitz example

如何在div：after和div：before上使用渲染器设置样式？

1 个答案: