Angular-BookMonkey: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Zeile 21: | Zeile 21: | ||
<source lang="bash">ng g interface shared/book | <source lang="bash">ng g interface shared/book | ||
ng g component book-list | ng g component book-list | ||
ng g component book-list-item | |||
</source> | </source> | ||
Zeile 87: | Zeile 88: | ||
* Import von angular/core | * Import von angular/core | ||
* Dekorator @Input() bzw. @Input('domProperty') ('''nicht empfohlen'''). | * Dekorator @Input() bzw. @Input('domProperty') ('''nicht empfohlen'''). | ||
* Bei Fehler "has no initializer and is not definitely assigned in the constructor": undefined zulassen (! nach dem Variablennamen). | |||
<source lange="ts">import { component, Input } from '@angular/core'; | <source lange="ts">import { component, Input } from '@angular/core'; | ||
@Component({ | @Component({ | ||
Zeile 93: | Zeile 95: | ||
}) | }) | ||
export class MyComponent { | export class MyComponent { | ||
@Input() domProperty: string; | @Input() domProperty!: string; | ||
@Input('domProperty') myProperty: string; | @Input('domProperty') myProperty: string; | ||
constructor() { } | constructor() { } | ||
} | } | ||
</source> | </source> |
Version vom 15. August 2021, 07:01 Uhr
Links
Schritte
ng new BookMonkey -p bm
# ... Angular routing: y
# Rest: leere Eingabe
npm install semantic-ui-css
- Änderung in angular.json:
- projects -> BookMonkey -> architect -> build -> options -> styles:
- projects -> BookMonkey -> architect -> test -> options -> styles:
"styles": [ "node_modules/semantic-ui-css/semantic.css" ],
- neues Interface
ng g interface shared/book
ng g component book-list
ng g component book-list-item
- Anpassungen in booklist.component.html
- Anpassungen in booklist.component.js
- Eintrag in app.component.html:
<bm-book-list></bm-book-list>
Komponente
- Dekorator @Component
- Initialisierung nicht im Konstruktor, sondern in
ngOnInit(): void(){}
- Alle Bausteine der Anwendung werden mittels
@NgModule()
in Angular-Modulen organisiert. Automatisch mitng g component...
erledigt in app.module.ts. - Eine Komponte muss immer in declarations eines Moduls registriert werden. Automatisch mit
ng g component...
erledigt. - Verschachtelung von Komponenten über (CSS-)Selektor.
Selektoren
- div.active Div-Element mit CSS-Klasse active
- input[type=text] Eingabefeld vom Typ Text
- li:nth-child(2) jedes zweite Listenelement innerhalb des Elternelements
- my-element Element mit Tag
<my-element>
- [myAttr] Attribut, z.B..
<div myAttr="123"
- [myAttr=bar] Attribut, z.B..
<div myAttr="bar"
- .myClass Elemente mit CSS-Klasse myClass, z.B.
<div class="myClass"
Konvention: möglichst nur Elementnamen verwenden
Property-Bindings
- Bringt Daten von der Komponente in Kindelemente im Komponentenbaum.
<my-component [property]="expression"></my-component>
- Datenänderung führt automatisch zu Anzeigeaktualisierung
- Auch beliebige Attribute im DOM-Baum sind ansprechbar:
const myImg = document.getElementById('myImg');
myImg.src = 'angular.src';
myImg.style.border = '1px solid black';
- HTML-Element ist konstanter Text, Dynamik wird durch Interpolation und die Property-Bindings erzeugt.
- Alternative Schreibweisen:
<!-- Interpolation --> <element property="{{ expression }}"</element> <!-- Textkonstante in Ticks einfügen: --> <element [property]="'value'"></element>
Beispiele
<!-- URL und Title werden aus der Komponente x.myUrl bzw. x.myTitle genommen --> <img [src]="myUrl" [title]="myTitle" /> <button [disabled]="isDisabled">Do it</button> <p [textContent]="'DubuDubuDuu'"></p> <my-component [foo]="1+1"></my-component>
Weitere Arten von Property-Bindings
- Attribute-Bindings: Setzen von Attributwerten
[attr.colspan]
<td [attr.colspan]="myColSpan"></td> <a [attr.role]="myRole>Link</a>
- Class-Bindings: Zuweisen von CSS-Klassen:
[class.myCssClass]
, wenn Bedingung ("expression") true ist.- Alternative
[ngClass]
, wenn mehrere gleichzeitig zugewiesen werden sollen.
- Alternative
<element [class.myClass]="hasMyClass"></element> <div [ngClass]="[ active: isActive, 'has-error': hasError, disabled: isDisabled, myClass: hasMyClass }"></div>
- Style-Bindings: Hinzufügen von CSS-Stilen:
[style.color]
- Mehrere Zuweisungen mittels
[ngStyle]
.
- Mehrere Zuweisungen mittels
<! Achtung, funktioniert nicht, da aus Sicherheitsgründen verboten: --> <element style="color: {{ myColor }}"></element> <element [style.color="myColor"></element> <div [ngStyle]="{ 'color': myColor, 'padding': '10px' }"></div> <div [ngStyle]="myStyles"></div>
Rückfluss DOM-Property in Komponente
- Import von angular/core
- Dekorator @Input() bzw. @Input('domProperty') (nicht empfohlen).
- Bei Fehler "has no initializer and is not definitely assigned in the constructor": undefined zulassen (! nach dem Variablennamen).
import { component, Input } from '@angular/core';
@Component({
selector: 'my-component';
templateUrl: './my.compoent.html';
})
export class MyComponent {
@Input() domProperty!: string;
@Input('domProperty') myProperty: string;
constructor() { }
}