Angular 2
Komponenten
Suche…
Einführung
Winkelkomponenten sind Elemente, die aus einer Vorlage bestehen, die Ihre Anwendung rendert.
Eine einfache Komponente
Um eine Komponente zu erstellen, fügen wir @Component
Dekorator in einer Klasse hinzu, wobei einige Parameter übergeben werden:
-
providers
: Ressourcen, die in den Komponentenkonstruktor eingefügt werden -
selector
: Der Abfrageselektor, der das Element im HTML-Code findet und durch die Komponente ersetzt -
styles
: Inline-Styles. ANMERKUNG: Verwenden Sie diesen Parameter NICHT mit Requirement, er funktioniert bei der Entwicklung, aber wenn Sie die Anwendung in der Produktion erstellen, gehen alle Ihre Stile verloren -
styleUrls
: Array vonstyleUrls
zu Style-Dateien -
template
: Zeichenfolge, die Ihren HTML-Code enthält -
templateUrl
: Pfad zu einer HTML-Datei
Es gibt andere Parameter, die Sie konfigurieren können, aber die aufgelisteten sind die, die Sie am häufigsten verwenden werden.
Ein einfaches Beispiel:
import { Component } from '@angular/core';
@Component({
selector: 'app-required',
styleUrls: ['required.component.scss'],
// template: `This field is required.`,
templateUrl: 'required.component.html',
})
export class RequiredComponent { }
Vorlagen & Stile
Vorlagen sind HTML-Dateien, die Logik enthalten können.
Sie können eine Vorlage auf zwei Arten angeben:
Vorlage als Dateipfad übergeben
@Component({
templateUrl: 'hero.component.html',
})
Vorlage als Inline-Code übergeben
@Component({
template: `<div>My template here</div>`,
})
Vorlagen können Stile enthalten. Die in @Component
deklarierten @Component
unterscheiden sich von Ihrer Anwendungsstildatei. @Component
in der Komponente angewendeten Stile sind auf diesen Bereich beschränkt. Angenommen, Sie fügen Folgendes hinzu:
div { background: red; }
Alle div
s im Inneren des Bauteils wird rot sein, aber wenn Sie andere Komponenten haben, andere divs in Ihrem HTML werden sie nicht verändert werden.
Der generierte Code sieht folgendermaßen aus:
Sie können einer Komponente auf zwei Arten Stile hinzufügen:
Ein Array von Dateipfaden übergeben
@Component({
styleUrls: ['hero.component.css'],
})
Übergeben eines Arrays von Inline-Codes
styles: [ `div { background: lime; }` ]
Sie sollten styles
mit require
da dies beim Erstellen Ihrer Anwendung für die Produktion nicht funktioniert.
Eine Komponente testen
hero.component.html
<form (ngSubmit)="submit($event)" [formGroup]="form" novalidate>
<input type="text" formControlName="name" />
<button type="submit">Show hero name</button>
</form>
hero.component.ts
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Component } from '@angular/core';
@Component({
selector: 'app-hero',
templateUrl: 'hero.component.html',
})
export class HeroComponent {
public form = new FormGroup({
name: new FormControl('', Validators.required),
});
submit(event) {
console.log(event);
console.log(this.form.controls.name.value);
}
}
hero.component.spec.ts
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { HeroComponent } from './hero.component';
import { ReactiveFormsModule } from '@angular/forms';
describe('HeroComponent', () => {
let component: HeroComponent;
let fixture: ComponentFixture<HeroComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [HeroComponent],
imports: [ReactiveFormsModule],
}).compileComponents();
fixture = TestBed.createComponent(HeroComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should be created', () => {
expect(component).toBeTruthy();
});
it('should log hero name in the console when user submit form', async(() => {
const heroName = 'Saitama';
const element = <HTMLFormElement>fixture.debugElement.nativeElement.querySelector('form');
spyOn(console, 'log').and.callThrough();
component.form.controls['name'].setValue(heroName);
element.querySelector('button').click();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(console.log).toHaveBeenCalledWith(heroName);
});
}));
it('should validate name field as required', () => {
component.form.controls['name'].setValue('');
expect(component.form.invalid).toBeTruthy();
});
});
Komponenten verschachteln
Komponenten werden in ihrem jeweiligen selector
, sodass Sie diese zum Schachteln von Komponenten verwenden können.
Wenn Sie eine Komponente haben, die eine Nachricht anzeigt:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-required',
template: `{{name}} is required.`
})
export class RequiredComponent {
@Input()
public name: String = '';
}
Sie können es in einer anderen Komponente verwenden, indem Sie app-required
(Selector dieser Komponente) verwenden:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-sample',
template: `
<input type="text" name="heroName" />
<app-required name="Hero Name"></app-required>
`
})
export class RequiredComponent {
@Input()
public name: String = '';
}