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 class
w 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.