Dyrektywy dotyczące atrybutów

Angular ma wbudowane dyrektywy atrybutów, takie jak ngClass ingStyle, które działają na dowolnym komponencie lub elemencie.

Dyrektywa NgStyle

Dyrektywa ngStyle modyfikuje atrybutstyle komponentu lub elementu. Oto przykład:

import { Component } from '@angular/core';

@Component({
  selector: 'app-style-example',
  template: `
    <p  style="padding: 1rem"
        [ngStyle]="{ 
          color: 'red',
          'font-weight': 'bold',
          borderBottom: borderStyle
        }">
        <ng-content></ng-content>
    </p>
  `
})
export class StyleExampleComponent {
  borderStyle = '1px solid black';
}

Zobacz przykład [010]

Zwróć uwagę, że powiązanie dyrektywy działa dokładnie tak samo, jak powiązanie atrybutów komponentów. Tutaj wiążemy wyrażenie, literał obiektu, do dyrektywy ngStyle, więc nazwa dyrektywy musi być ujęta w nawiasy kwadratowe. ngStyle . Akceptuje obiekt, którego właściwości i wartości definiują styl elementu w którym użyto dyrektywy. Zauważ także, że zarówno atrybut html style, jak i Angularowy ngStyle mogą być używane łącznie podczas stylizowania elementu.

Możemy usunąć właściwości stylu z szablonu do komponentu jako właściwość obiektu, która następnie zostanie przypisany do NgStyle przy użyciu powiązania właściwości. Pozwala to na dynamiczne zmiany wartości, a także zapewnia elastyczność dodawania i usuwania właściwości stylu.

@Component({
  selector: 'app-style-example',
  template: `
    <p style="padding: 1rem"
      [ngStyle]="alertStyles">
      <ng-content></ng-content>
    </p>
  `
})
export class StyleExampleComponent {
  borderStyle = '1px solid black';

  alertStyles = {
    'color': 'red',
    'font-weight': 'bold',
    'borderBottom': this.borderStyle
  };
}

Dyrektywa NgClass

Dyrektywa ngClass zmienia atrybutclass, który jest powiązany z komponentem lub elementem, do którego jest przyłączony. Istnieje kilka różnych sposobów korzystania z dyrektywy.

Wiązanie łańcucha

Możemy powiązać ciąg bezpośrednio z atrybutem. Działa to podobnie do dodawania atrybutu classw html.

@Component({
  selector: 'app-class-as-string',
  template: `
    <p ngClass="centered-text underlined" class="orange">
      <ng-content></ng-content>
    </p>
  `,
  styles: [`
    .centered-text {
      text-align: center;
    }

    .underlined {
      border-bottom: 1px solid #ccc;
    }

    .orange {
      color: orange;
    }
  `]
})
export class ClassAsStringComponent {
}

Zobacz przykład [011]

W tym przypadku wiążemy ciąg bezpośrednio, więc unikamy umieszczania dyrektywy w nawiasach kwadratowych. Zauważ także, że ngClass można (analogicznie jak ngStyle) używać łącznie z atrybutemclass. Z ich połączenia definiuje się klasy końcowe.

Wiązanie tablicy

@Component({
  selector: 'app-class-as-array',
  template: `
    <p [ngClass]="['warning', 'big']">
      <ng-content></ng-content>
    </p>
  `,
  styles: [`
    .warning {
      color: red;
      font-weight: bold;
    }

    .big {
      font-size: 1.2rem;
    }
  `]
})
export class ClassAsArrayComponent {
}

Zobacz przykład [011]

Tutaj, ponieważ wiążemy się z dyrektywą ngClass za pomocą wyrażenia, musimy ująć nazwę dyrektywy w nawiasach kwadratowych. Przejście w tablicy jest przydatne, gdy chcemy, aby funkcja zawierała listę odpowiednich nazw klas.

Wiązanie obiektu

Wreszcie obiekt może być związany z dyrektywą. Angular stosuje każdą nazwę właściwości tego obiektu do komponentu, jeśli ta właściwość jest prawdziwa.

@Component({
  selector: 'app-class-as-object',
  template: `
    <p [ngClass]="{ card: true, dark: false, flat: flat }">
      <ng-content></ng-content>
      <br>
      <button type="button" (click)="flat=!flat">Toggle Flat</button>
    </p>
  `,
  styles: [`
    .card {
      border: 1px solid #eee;
      padding: 1rem;
      margin: 0.4rem;
      font-family: sans-serif;
      box-shadow: 2px 2px 2px #888888;
    }

    .dark {
      background-color: #444;
      border-color: #000;
      color: #fff;
    }

    .flat {
      box-shadow: none;
    }
  `]
})
export class ClassAsObjectComponent {
  flat: boolean = true;
}

Zobacz przykład [011]

Widzimy tutaj, że ponieważ właściwości obiektu card iflat są prawdziwe, są stosowane, natomiast dark ma wartość false, więc nie jest stosowana.