Как я могу применять стили динамически с ngStyle? - PullRequest
Новая
       33

Как я могу применять стили динамически с ngStyle?

0 голосов
/ 09 октября 2019

Как я могу переключить левое значение px с правым на основе логического значения?

Я хочу переключить [ngStyle]="{ 'left.px': offSetX } с [ngStyle]="{ 'right.px': offSetX } на основе условия 

    import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <div class="myDiv" [ngStyle]="{ 'left.px': offSetX }"></div>

    <button (click)="applyRightStyle()">Apply Right Style</button>
  `,
  styles: [
    `
      .myDiv {
        border: 1px solid black;
        height: 200px;
        width: 200px;
        position: absolute;
        top: 100px;
        margin-left: 50px;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;

  offSetX = 100;
  applyRightBoolean = false;

  applyRightStyle() {}
}

Демонстрация Stackblitz

Редактировать: я хочу заменить стиль, как в разделе Удалить левый, если я применяю правый, и Удалить правый, когда левый применен, потому что left: 0px, right: 10px не равно right: 10px.

Решение: Правильный способ сброса left или right - использовать initial вместо 0px

Ответы [ 4 ]

2 голосов
/ 09 октября 2019

Я думаю, что нам придется управлять обоими стилями. Он также будет работать с ngStyle, но мне нравится синтаксис [style.xxx]: 

@Component({
  selector: "hello",
  template: `
    <div class="myDiv" [style.left.px]="offSetLeft" [style.right.px]="offSetRight"></div>

    <button (click)="applyRightStyle()">Apply Right Style</button>
    <button (click)="applyLeftStyle()">Apply Left Style</button>

  `
})
export class HelloComponent {
  @Input() name: string;

  offSetLeft = 100;
  offSetRight = 0;
  applyRightBoolean = false;

  applyRightStyle() {
    this.offSetLeft = 0;
    this.offSetRight = 50;
  }

  applyLeftStyle() {
    this.offSetLeft = 100;
    this.offSetRight = 0;
  }
}

Форк stackblitz .

2 голосов
/ 09 октября 2019

Почему бы не оставить их обоих и сбросить в зависимости от условия?

Stackblitz 

import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <div class="myDiv" [ngStyle]="{ 'left.px': !applyRightBoolean ? offSetX : 0, 'right.px': applyRightBoolean ? offSetX : 0 }"></div>

    <button (click)="applyRightStyle()">Apply Right Style</button>
  `,
  styles: [
    `
      .myDiv {
        border: 1px solid black;
        height: 200px;
        width: 200px;
        position: absolute;
        top: 100px;
        margin-left: 50px;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;

  offSetX = 100;
  applyRightBoolean = false;

  applyRightStyle() {
    this.applyRightBoolean = true;
  }
}
0 голосов
/ 09 октября 2019

ОБНОВЛЕНИЕ: 

[ngStyle]="{ condition ? '\'left.px\': offSetX' : '\'right.px\': offSetX'}
0 голосов
/ 09 октября 2019 
public bgcolor = "red";

 [style.backgroundColor]="bgcolor"
second way used like that for multiple

public bgcolor = {
    backgroundColor:"orange"
};

[ngStyle]="bgcolor"

для вашего стиля, используемого таким образом 

[ngStyle]="{ backgroundColor:'#' + element.color }"

<ng-container matColumnDef="color">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> color </th>
  <td mat-cell *matCellDef="let element" [ngStyle]="{ backgroundColor:'#' + element.color }" > #{{element.color}} </td>
</ng-container>
...