@Component({
...
template: '<p #bio></p>'
})
export class UserDetailsComponent {
@ViewChild('bio') bio;
}
<p>-Tag, das die bio-Template-Referenzvariable in der Template-Ansicht der Komponente hat.<p>-Tag als Kind der übergeordneten Ansicht gerendert wird, die diese Komponente verwendet.<p>-Tag im Template, Content Projection zu unterstützen.<p>-Tag im finalen Rendering sichtbar. Wenn #bio im Template verwendet wurde und @ViewChild nicht in der Klasse verwendet wurde, würde Angular das <p>-Tag mit #bio automatisch verbergen.DigitalOcean - viewchild-access-component
<form>-Element hinzu, um anzugeben, welche Felder es enthalten soll.Angular.io - Reactive Form Groups
paramMap und queryParamMap in der ActivatedRoute-Klasse?<h2>Namen</h2>
<div *ngFor="let user of users | async"></div>
<h2>Alter</h2>
<div *ngFor="let user of users | async"></div>
<h2>Geschlechter</h2>
<div *ngFor="let user of users | async"></div>
export class OrderService {
constructor(private httpClient: HttpClient) {}
addOrder(order: Order) {
// Fehlende Zeile
}
}
this.httpClient.url(this.orderUrl).post(order);this.httpClient.send(this.orderUrl, order);this.httpClient.post<Order>(this.orderUrl, order);this.httpClient.post<Order>(this.orderUrl, order).subscribe();Angular.io - Daten an Server senden
@Component({
selector: 'app-user-card',
. . .
})
<div app-user-card></div>.<app-user-card></app-user-card>.<app-user-card></app-user-card>.<user-card></user-card>.Angular.io - Component Metadata
A
<ul>
<li [ngFor]="let productName of productNames"></li>
</ul>
B
<ul>
<li ngFor="let productName of productNames"></li>
</ul>
C
<ul>
<li *ngFor="let productName of productNames"></li>
</ul>
D
<ul>
<? for productName in productNames { ?>
<li></li>
<? } ?>
</ul>
Angular.io - Strukturelle Direktiven
@Component({
selector: 'app-title-card',
template: '',
})
class TitleCardComponent {
title = 'User Data';
}
title[title]Angular.io - String Interpolation oder Text Interpolation
Angular.io - Anzeigen eines Formular-Control-Werts
<a>-Tag mit Routing zu verknüpfen?@Component({
selector: 'app-shopping-cart',
. . .
})
export class ShoppingCartComponent {
@Output() itemTotalChanged = new EventEmitter();
}
itemTotalChanged-Klassenfeld öffentlich.itemTotalChanged-Klassenfeld zu binden, so: <app-shopping-cart [itemTotalChanged]="newTotal"></app-shopping-cart>.itemTotalChanged-Klassenfeld zu binden, so: <app-shopping-cart (itemTotalChanged)="logNewTotal($event)"></app-shopping-cart>.Angular.io - Daten an übergeordnete Komponente senden
<div *ngIf="isVisible">Aktiv</div>
<div [hidden]="!isVisible">Aktiv</div>
ngIf ist eine Kurzform für das andere Beispiel. Wenn Angular diese Direktive verarbeitet, schreibt es ein div-Element in das DOM mit der hidden-Eigenschaft.ngIf-Direktive rendert das div nicht im DOM, wenn der Ausdruck false ist. Die Verwendung der hidden-Eigenschaft verbirgt den div-Inhalt im Browser-Viewport, aber das div ist immer noch im DOM.ngIf ist gültig, aber die Verwendung der hidden-Eigenschaft ist falsch und wird einen Fehler werfen.<form #userForm="ngForm">
<input type="text" ngModel name="firstName" required />
<input type="text" ngModel name="lastName" required />
<button (click)="submit(userForm.value)">Speichern</button>
</form>
A
<button (click)="submit(userForm.value)" disable="userForm.invalid">Speichern</button>
B
<button (click)="submit(userForm.value)" [disabled]="userForm.invalid">Speichern</button>
C
<button (click)="submit(userForm.value)" [ngForm.disabled]="userForm.valid">Speichern</button>
D
<button (click)="submit(userForm.value)" *ngIf="userForm.valid">Speichern</button>
Angular.io - Formular mit ngSubmit absenden
Angular.io - ng generate Optionen
@Component({
selector: 'app-title-card',
template: '<h1 title="User Data"> </h1>',
})
export class TitleCardComponent {
titleText = 'User Data';
}
<h1 data-title="titleText"></h1><h1 title="titleText"></h1><h1 [title]="titleText"></h1><h1 titleText></h1>Angular.io - String Interpolation
<span>Chef: </span>
{ path: 'user/:id', component: UserDetailComponent }{ url: 'user/:id', routedComponent: UserDetailComponent }{ routedPath: 'user/:id', component: UserDetailComponent }{ destination: new UserDetailComponent(), route: 'user/:id' }CodeCraft - Parametrisierte Routes
@Directive({
selector: '[appCallout]',
})
export class CalloutDirective {
@HostBinding('style.font-weight') fontWeight = 'normal';
@HostListener('mouseenter')
onMouseEnter() {
this.fontWeight = 'bold';
}
@HostListener('mouseleave')
onMouseLeave() {
this.fontWeight = 'normal';
}
}
<input type="text" ngModel name="firstName" required minlength="4" />
<span *ngIf="">Ungültige Felddaten</span>
<h1 #headerText>Benutzerliste</h1>
<h1>-ElementsPluralsight - Template-Referenzvariable
[{ provide: FormattedLogger, useClass: Logger }][{ provide: FormattedLogger, useExisting: Logger }];
{
path: 'customers',
component: CustomerListComponent,
data: { accountSection: true }
}
ngIf-Direktive das gerenderte DOM basierend auf dieser Template-Syntax?@Component({
selector: 'app-product',
template: '<div *ngIf="product"></div>',
})
export class ProductComponent {
@Input() product;
}
<div> fungiert als Platzhalter. Wenn das product-Klassenfeld “truthy” ist, wird das <div> durch nur den product.name-Wert ersetzt; wenn nicht, wird nichts gerendert.<div> wird immer gerendert, und wenn das product-Feld “truthy” ist, enthält das <div>-Element den product.name-Wert; andernfalls rendert es das <div>-Element ohne Wert darin.<div> mit dem Wert des product.name-Felds. Wenn es nicht “truthy” ist, enthält das gerenderte DOM nicht das <div>-Element.@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent],
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
Angular.io - Das grundlegende NgModule
{
path: ':id',
component: UserComponent,
resolve: {
user: UserResolverService
}
}
@Component({
. . .
template: '<ng-content></ng-content>'
})
export class TabsListComponent {
@ContentChildren(TabComponent) tabs;
}
<ng-content>-Element eingefügt.<ng-content> für diese Komponente projiziert wurden.fixture.detectChanges()-Aufrufs in diesem Unit-Test?TestBed.configureTestingModule({
declarations: [UserCardComponent],
});
let fixture = TestBed.createComponent(UserCardComponent);
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('h1').textContent).toContain(
fixture.componentInstance.title,
);
Router.navigate-Methode, wenn goToUser mit dem Wert 15 übergeben wird?export class ToolsComponent {
constructor(private router: Router) {}
goToUser(id: number) {
this.router.navigate(['user', id]);
}
}
@Directive({
selector: ' [appHighlight] ',
})
export class HighlightDirective {
@HostBinding('class.highlighted') highlight = true;
}
<form>-Element verwendet, um es zu verdrahten?FormArrayFormControlFormGroupalle diese Antworten<form [formGroup]="form">
<input type="text" formControlName="username" />
...
</form>
A
<span *ngIf="username.minLength.invalid"> Benutzername-Länge ist nicht gültig </span>
B
<input type="text" formControlName="username" [showMinLength]="true" />
C
<span *ngIf="form.get('username').getError('minLength') as minLengthError">
Benutzername muss mindestens Zeichen lang sein.
</span>
D
<input type="text" formControlName="username" #userName="ngModel" />
<span *ngIf="userName.errors.minlength">
Benutzername muss mindestens Zeichen lang sein.
</span>
TestBed.configureTestingModule({
declarations: [UserCardComponent],
});
let fixture = TestBed.createComponent(UserCardComponent);
fixture.componentTemplatefixture.getComponentHtml()fixture.nativeElementfixture.componentInstance.template@Component({
selector: 'app-card',
template: '<h1>Datenkarte</h1><ng-content></ng-content>'
})
export class CardComponent { }
@Component({
selector: 'app-bio',
template: '<ng-content></ng-content>.
})
export class BioComponent { }
// Markup-Verwendung:
<app-card><app-bio>Seit vier Jahren dabei.</app-bio></app-card>
A
<app-card>
<h1>Datenkarte</h1>
<app-bio> Seit vier Jahren dabei. </app-bio>
</app-card>
B
<h1>Datenkarte</h1>
<app-bio>Seit vier Jahren dabei.</app-bio>
C
<app-card>
<h1>Datenkarte</h1>
<ng-content></ng-content>
<app-bio> Seit vier Jahren dabei. <ng-content></ng-content> </app-bio>
</app-card>
D
<app-card>
<h1>Datenkarte</h1>
</app-card>
@Component({
selector: 'app-user-card',
template: '<app-title-card></app-title-card><p>Jenny Smith</p>'
})
@Component({
selector: 'app-title-card',
template: '<h1>Benutzerdaten</h1>'
})
// Verwendung der User-Card-Komponente im HTML der übergeordneten Komponente
<app-user-card></app-user-card>
A
<app-user-card>
<app-title-card>
<h1>Benutzerdaten</h1>
</app-title-card>
<p>Jenny Smith</p>
</app-user-card>
B
<h1>Benutzerdaten</h1>
<p>Jenny Smith</p>
<p></p>
C
<app-user-card>
<app-title-card></app-title-card>
</app-user-card>
D
<div app-user-card>
<h1 app-title-card>Benutzerdaten</h1>
<p>Jenny Smith</p>
</div>
constructor(@Inject('Logger') private logger) { }
A
providers: [Logger];
B
providers: [{ provide: 'Logger', useClass: Logger }];
C
@Injectable({
providedln: 'root'
})
D
providers: [{ provide: 'Logger' }];
export class SettingsService {
constructor(private httpClient: HttpClient) { }
...
getSettings()
{
return this.httpClient.get<Settings>(this.settingsUrl)
.pipe(
retry(3)
);
}}
getSettings die get-Abfrage ausführt. Der retry-Operator wird verwendet, um dem pipe-Aufruf mitzuteilen, die get-Abfrage dreimal zu wiederholen.Httpclient.get-Aufruf verfügbar ist.const spy = jasmine.createSpyObj('DataService', ['getUsersFromApi']);
TestBed.configureTestingModule({
providers: [UserService, { provide: DataService, useValue: spy }],
});
const userService = TestBed.get(UserService);
Alle anderen Tests werden ignoriert, einschließlich Tests, die Ergebnisse gegen einen dieser Provider und einen nicht definierten Provider bestätigen.
Obwohl es funktioniert, wenn mehrere Provider in dieser Konfiguration in einem einzigen Test bestätigt werden.
@Directive({
selector: '[appTruncate]'
})
export class TruncateDirective {
. . .
}
// Beispiel der gewünschten Verwendung:
<p [appTruncate]="10">Sehr langer Text hier</p>
@Input() appTruncate: number;@Output() appTruncate;constructor(maxLength: number) { }Nichts. Der Direktiven-Selektor kann nicht verwendet werden, um Werte an die Direktive zu übergeben.HttpClient.get-Anfrage übergeben?export class OrderService {
constructor(private httpClient: HttpClient) {}
getOrdersByYear(year: number): Observable<Order[]> {
return this.httpClient.get<Order[]>(this.ordersUrl);
}
}
return this.httpClient.get<Order[]>(this.ordersUrl, {'year': year})return this.httpClient.get<Order[]>(this.ordersUrl, year)C
const options = { params: new HttpParams().set('year', year) };
return this.httpClient.get<Order[]>(this.ordersUrl, options);
D
getOrdersByYear(year: number): Observable<Order[]> {
return this.httpClient.addParam('year', year).get<Order[]>(this.ordersUrl, year);
}
DataService wurde in den Providern für die Anwendung registriert, welche Antwort beschreibt am besten, was basierend auf dem Konstruktor dieser Komponente passiert?@Component({
...
})
export class OrderHistoryComponent {
constructor(private dataService: DataService) {}
...
}
OrderHistoryComponent ihre eigene Version eines DataService haben wird und dass sie niemals existierende Instanzen verwenden sollte. Der DataService müsste innerhalb der Klasse als privates Feld instanziiert werden, damit dieser Code vollständig und funktionsfähig ist.OrderHistoryComponent erstellt, wird der Injector eine Instanz einer DataService-Klasse dem ersten Argument des Komponenten-Konstruktors bereitstellen. Der dataService-Parameter des Konstruktors wird verwendet, um ein privates Instanzfeld mit demselben Namen auf der Instanz zu setzen.dataService zu haben, die verwendet werden kann, um eine existierende DataService-Instanz zu binden.ngIf-Direktive, um einen else-Fall zu implementieren, der den Text “Benutzer ist nicht aktiv” anzeigt:<div *ngIf="userIsActive; else inactive">Derzeit aktiv!</div>
A
<div #inactive>Benutzer ist nicht aktiv.</div>
B
<div *ngIf="inactive">Benutzer ist nicht aktiv.</div>
C
<ng-template #else="inactive">
<div>Benutzer ist nicht aktiv.</div>
</ng-template>
D
<ng-template #inactive>
<div>Benutzer ist nicht aktiv.</div>
</ng-template>
A
{
path: 'users',
lazy: './users/users.module#UsersModule'
}
B
{
path: 'users',
loadChildren: () => import('./users/users.module').then(m => m.UserModule)
}
C
{
path: 'users',
loadChildren: './users/users.module#UsersModule'
}
D
{
path: 'users',
module: UsersModule
}
Angular.io - Lazy Loading Modules
export class UserFormControl implements OnInit {
...
ngOnInit() {
this.form = this.formBuilder.group({
username: this.formBuilder.control('',
[Validators.required, Validators.minLength(5), this.unique]),
)};
}
unique(control: FormControl) {
return control.value !== 'admin' ? null: {notUnique: true};
}
}
FormControl für username wird konfiguriert, um drei Validatoren von den Validatoren auszuschließen, die es verwenden darf.FormControl für username wird konfiguriert, um drei mögliche Validatoren zuzulassen: required, maxLength und einen benutzerdefinierten namens unique. Um diese Validatoren zu aktivieren, müsste eine Validator-Direktive auf die Formularfelder im Markup gesetzt werden.FormControl für username wird mit drei Validatoren konfiguriert: den required- und minLength-Validatoren, die von Angular kommen, und einer benutzerdefinierten Validator-Funktion namens unique, die prüft, ob der Wert nicht gleich dem String admin ist.@Injectable({
providedIn: 'root'
)}
export class DataService { }
export interface AppSettings {
title: string;
version: number;
}
export const APP_SETTINGS = new InjectionToken<AppSettings>('app.settings');
<form #form="ngForm">
<input type="text" ngModel="firstName" /> <input type="text" ngModel="lastName" />
<button (click)="submit()">Speichern</button>
</form>
prelodingStrategy-Eigenschaftskonfiguration in diesem Router-Code?RouterModule.forRoot(
...{
preloadingStrategy: PreloadAllModules,
},
);
Referenzen:
userName an die title-Eigenschaft des h1-Elements zu binden?<h1 [title]="userName">Aktueller Benutzer ist </h1>
title="userName"title=""title="userName"async-Pipe in diesem Beispiel?@Component({
selector: 'app-users',
template: '<div *ngFor="let user of users | async"></div>',
})
export class UsersComponent implements OnInit {
users;
constructor(private httpClient: HttpClient) {}
ngOnInit(): void {
this.users = this.httpClient.get<{ name: string }>('users');
}
}
ngFor-Anweisung verwendet werden kann.ngFor-Iteration, um mehrere Listen von Benutzern gleichzeitig zu unterstützen.HttpClient.get-Methode zurückgegeben wird, und entpackt den zurückgegebenen Wert, sodass er in der ngFor iteriert werden kann.users-Feld gleichzeitig zum DOM gerendert werden.@Directive({ selector: '[appTruncate]'
})
export class TruncateDirective{ . . .
}
html <p data-directive="appTruncate">Langer Text </p> html <p appTruncate>Langer Text</p> html <p app-truncate>Langer Text</p> html <app-truncate>Langer Text</app-truncate> Wie erkennt man, wann sich ein @Input()-Wert in Angular ändert?
@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
transform(value: string, maxLength: number, showEllipsis: boolean) {
const newValue = maxLength ? value.substr(0, maxLength) : value;
return showEllipsis ? '${newValue}...' : newValue;
}
}
langer ...langertruelanger TextWie rufe ich eine Angular 2 Pipe mit mehreren Argumenten auf?
<div *ngIf="location">
<h1></h1>
<p></p>
</div>
A
<div *ngIf="location">
<h1></h1>
<p></p>
</div>
B
<ng-template *ngIf="location">
<h1></h1>
<p></p>
</ng-template>
C
<div *ngIf="location" [display]=" ' hidden' ">
<h1></h1>
<p></p>
</div>
D
<ng-container *ngIf="location">
<h1></h1>
<p></p>
</ng-container>
{{ width: tabWidth }}Angular Unit-Tests - Antworten erneut prüfen
CanActivate vs Canload CanActivate verhindert den Zugriff auf Routen, CanLoad verhindert Lazy Loading.
{ path: 'document', component: DocumentComponent, outlet: 'document-box'
}
<document-box> im DOM und fügt bei der Routen-Navigation ein DocumentComponent-Element in sie ein.<document-box>-Elements verwendet werden kann.<router-outlet>-Element mit dem name-Attribut, das mit dem String-Wert übereinstimmt, als Ort für das Rendern der DocumentComponent beim Routing anzusprechen.Angular-outlet - Antwort erneut prüfen
<div *ngFor="let item of items"> - </div>
*ngFor="let item of items; let uniqueItem"*ngFor="let item of items.distinct()"*ngFor="let item of items: let i = index"*ngFor="let item of items; trackBy: trackById"StackOverflow - Wie man trackBy mit ngFor verwendet
ng build --configuration=production --progress=false
Angular-Dokumentation - ng build
@Component({ selector:'app-product-name', ...
})
export class ProductNameComponent { @Input() productName: string
}
html
<input type='text' id='productName'> DOM-Element im Komponenten-Template.Input()Input()useValue-Provider-Konfiguration und setzen Sie diese gleich einem vorhandenen Objekt oder einem Objekt-Literal.asValue-Provider-Konfigurationseigenschaft und setzen Sie sie auf true.Konfiguration von Dependency-Providern
{path: 'user/:id', component: UserDetailComponent }
<form [formGroup]="form">
<input type="text" formControlName="username" />
<button type="submit" [disabled]="form. invalid">Absenden</button>
</form>
<button>-Element hinzu.<form>-Element hinzu.<div [ngClass]="{ 'active-item': isActive }">Element Eins</div>
<div active-item>Element Eins</div><div class="active-item">Element Eins</div><div class="is-active">Element Eins</div><div class="active-item isActive">Element Eins</div><input [(ngModel)]="user.name" />
text
text
text
<span [ngClass]="{ 'active': isActive, 'can-toggle': canToggle }"> Beschäftigt </span>
A
<span class=" ">
Beschäftigt
</span>
B
<span [class.active]="isActive" [class.can-toggle]="canToggle"> Beschäftigt </span>
C
<span [styles.class.active]="isActive" [styles.class.can-toggle]="canToggle"> Beschäftigt </span>
D
<span [css.class.active]="isActive" [css.class.can-toggle]="canToggle"> Beschäftigt </span>
@Directive({
selector: '[customValidator]',
providers: [
{
provide: NG_VALIDATORS,
useExisting: CustomValidatorDirective,
multi: true,
},
],
})
export class CustomValidatorDirective implements Validator {}
@Component({
selector: 'app-date-card',
template: '',
})
export class DateCardComponent {
currentYear() {
return new Date().getFullYear();
}
}
{{ currentYear() }}{{ component.currentYear() }}{{ currentYear }}