Próbuję połączyć klasy za pomocą klasy NG. Chcę użyć save klasy plus firstClass if something = First. Jestem dość nowy, by kątowy i robiłem trochę czytania, jak korzystać z klasy NG, ale nie byłem w stanie znaleźć rozwiązania. Czy jest lepszy sposób na podejście?

<mat-dialog-content>
  <div class="modal-title-box">
    <div id="holdtitle" class="modal-title">Do {{something}}</div>
  </div>
  <div class="modal-content">
    <div class="some-text">Are you sure you want to delete {{something | lowercase}}?</div>
  </div>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button id="cancelBtn" class="cancel" (click)="onNoClick()">Cancel</button>
  <button mat-button id="holdBtn" class="save ng-class= something ='First': 'firstClass' ? 'secondClass'" [mat-dialog-close]="true">Hold</button>
</mat-dialog-actions>
0
Maddy 7 marzec 2018, 22:22

3 odpowiedzi

Najlepsza odpowiedź

Jest kilka sposobów, jakie możesz to zrobić.

<button mat-button class="save" [ngClass]="something === 'First' ? 'firstClass' : 'secondClass'"></button>
<button mat-button class="save" [class.firstClass]="something === 'First'"
    [class.secondClass]="something !== 'First'"></button>
1
Daniel W Strimpel 7 marzec 2018, 19:28

Zawsze znajduję twardą składnię ng-class.

<button mat-button id="holdBtn" class="save"
    ng-class="{'firstClass': something == 'First', 'secondClass': something != 'First'}" 
    [mat-dialog-close]="true">Hold</button>

Spowoduje to to zastosowanie klasy save, a następnie, jeśli something == 'First' zastosuje firstClass, w przeciwnym razie zastosuj secondClass.

1
Brendan Green 7 marzec 2018, 19:36

Wygląda na to, że używasz kątowego (V2 +), na podstawie składni (click) w znaczniku.

Masz kilka opcji do osiągnięcia funkcjonalności dynamicznie dodawania / usuwa klas na elemencie z kątowym.

Ważną rzeczą, aby wiedzieć, że dyrektywa ngClass określa całą listę klas dla elementu. Możesz więc uwzględnić wiele klas w tym samym ciągu, o ile są one oddzielone przez przestrzenie (tak jak w normalnym class="..."). (Przykład: [ngClass]="'save firstClass'" będzie stosuje zarówno klasę save, jak i klasy firstClass do elementu.

Teraz, aby ustawić listę klas na podstawie stanu (takiego jak something === First) ...

Korzystanie z ngClass Dyrektywa:

<button [ngClass]="something === First ? 'save firstClass' : 'secondClass'" >
</button>

Korzystanie z {x0}} Atrybut:

<button [classList]="something === First ? 'save firstClass' : 'secondClass'" >
</button>

Uwaga: z dwoma podejściami, ryzykujesz wpływ na istniejące klasy na elemencie. Na przykład, jeśli chcesz save do zawsze być zawarte na liście klas dla tego elementu, musisz wymienić go w obu gałęziach wyrażenia trunkowanego (przed {{x1 }} i po :).


Innym sposobem, w jaki uważam za najlepsze, ponieważ nie ryzykujesz nadpisywania istniejących zajęć na elemencie, ma wykonywać pracę w komponencie, używając Renderer2 do dynamicznego addClass lub removeClass z listy klasowych w węźle, dostęp do elementu z @ViewChild:

przy użyciu Renderer2:

export class AppComponent implements DoCheck {
  something = 'first';
  @ViewChild('span') span: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngDoCheck() {
    if (this.something === 'first') {
      this.renderer.addClass(this.span.nativeElement, 'red-border');
    } else {
      this.renderer.removeClass(this.span.nativeElement, 'red-border');
    }
  }
}

To ostatnie podejście jest lepsze, ponieważ gwarantuje, że pozostałe klasy zostaje zachowane, ale dodaje bit brochę szablonu dodawania kotła #ref s i przy użyciu @ViewChild. Użyłem Hak Lifecycle {{X2}, zakładając, że wartość something może się zmienić, ale można użyć innego haka cyklu życia, jak OnInit, jeśli ta wartość jest statyczna.

Oto link do aplikacji roboczej ze wszystkimi trzema podejśćami zademonstrowanymi: https://stackblitz.com/ Edytuj / dynamicznie-zmianowe klasy.

1
vince 7 marzec 2018, 19:52