linkedin-skill-assessments-quizzes/angular/angular-quiz-de.md at main · Ebazhanov/linkedin-skill-assessments-quizzes

Angular

F1. Was ist der Zweck des ViewChild-Dekorators in dieser Komponentenklasse?

@Component({
    ...
    template: '<p #bio></p>'
})
export class UserDetailsComponent {
    @ViewChild('bio') bio;
}

Er bietet Zugriff von innerhalb der Komponentenklasse auf das ElementRef-Objekt für das <p>-Tag, das die bio-Template-Referenzvariable in der Template-Ansicht der Komponente hat.
Er zeigt an, dass das <p>-Tag als Kind der übergeordneten Ansicht gerendert wird, die diese Komponente verwendet.
Er ermöglicht es dem <p>-Tag im Template, Content Projection zu unterstützen.
Er macht das <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

F2. Welche Methode wird verwendet, um ein FormControl in reaktiven Formularen mit einem nativen DOM-Eingabeelement zu verbinden?

Fügen Sie den String-Namen, der dem FormControl gegeben wurde, einem Attribut namens controls auf dem <form>-Element hinzu, um anzugeben, welche Felder es enthalten soll.
Verwenden Sie die eckige Klammer-Binding-Syntax um das value-Attribut auf dem DOM-Element und setzen Sie dies gleich einer Instanz des FormControl.
Verwenden Sie die formControlName-Direktive und setzen Sie den Wert gleich dem String-Namen, der dem FormControl gegeben wurde.
Verwenden Sie den String-Namen, der dem FormControl gegeben wurde, als Wert für das id-Attribut des DOM-Elements.

Angular.io - Reactive Form Groups

F3. Was ist der Unterschied zwischen `paramMap` und `queryParamMap` in der `ActivatedRoute`-Klasse?

Die paramMap ist ein Objekt-Literal der Parameter im URL-Pfad einer Route. Die queryParamMap ist ein Observable dieser gleichen Parameter.
Die paramMap ist ein Observable, das die Parameterwerte enthält, die Teil des URL-Pfads einer Route sind. Die queryParamMap ist eine Methode, die ein Array von Schlüsseln entgegennimmt und verwendet wird, um bestimmte Parameter in der paramMap zu finden.
paramMap ist der Legacy-Name aus Angular 3. Der neue Name ist queryParamMap.
Beide sind Observables, die Werte aus dem angeforderten URL-String der Route enthalten. Die paramMap enthält die Parameterwerte, die im URL-Pfad sind, und die queryParamMap enthält die URL-Query-Parameter.

StackOverflow

F4. Basierend auf der folgenden Verwendung der async-Pipe und unter der Annahme, dass das Klassenfeld users ein Observable ist, wie viele Subscriptions zum users-Observable werden erstellt?

<h2>Namen</h2>
<div *ngFor="let user of users | async">{{ user.name }}</div>
<h2>Alter</h2>
<div *ngFor="let user of users | async">{{ user.age }}</div>
<h2>Geschlechter</h2>
<div *ngFor="let user of users | async">{{ user.gender }}</div>

Keine. Die async-Pipe abonniert nicht automatisch.
Keine. Die Template-Syntax ist nicht korrekt.
Drei. Es gibt eine für jede async-Pipe.
Eine. Die async-Pipe cached Observables nach Typ intern.

UltimateCourses

F5. Wie können Sie den HttpClient verwenden, um eine POST-Anfrage an einen Endpunkt aus einer addOrder-Funktion in diesem OrderService zu senden?

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

F6. Wofür wird die RouterModule.forRoot-Methode verwendet?

Zum Registrieren von Providern, die Sie in gerouteten Komponenten verwenden möchten.
Zum Registrieren von Route-Definitionen auf der Root-Anwendungsebene.
Um anzuzeigen, dass Angular Ihre Routes zum Erfolg anfeuern soll.
Um zu deklarieren, dass Sie Routing nur auf der Root-Ebene verwenden möchten.

O'REILLY

F7. Welche DOM-Elemente werden mit diesem Komponenten-Metadaten-Selektor übereinstimmen?

@Component({
    selector: 'app-user-card',
    . . .
})

Jedes Element mit dem Attribut app-user-card, wie z.B. <div app-user-card></div>.
Die erste Instanz von <app-user-card></app-user-card>.
Alle Instanzen von <app-user-card></app-user-card>.
Alle Instanzen von <user-card></user-card>.

Angular.io - Component Metadata

F8. Was ist die korrekte Template-Syntax für die Verwendung der eingebauten strukturellen ngFor-Direktive, um eine Liste von productNames zu rendern?

<ul>
  <li [ngFor]="let productName of productNames">{{ productName }}</li>
</ul>

<ul>
  <li ngFor="let productName of productNames">{{ productName }}</li>
</ul>

<ul>
  <li *ngFor="let productName of productNames">{{ productName }}</li>
</ul>

<ul>
  <? for productName in productNames { ?>
  <li>{{ productName }}</li>
  <? } ?>
</ul>

Angular.io - Strukturelle Direktiven

F9. Was sind die beiden Komponenten-Dekorator-Metadaten-Eigenschaften, die verwendet werden, um CSS-Stile für eine Komponente einzurichten?

viewEncapsulation und viewEncapsulationFiles.
Es gibt nur eine und das ist die Eigenschaft namens css.
css und cssUrl.
styles und styleUrls.

Angular.io - Component Styles

F10. Mit der folgenden Komponentenklasse, welche Template-Syntax würden Sie im Template verwenden, um den Wert des title-Klassenfelds anzuzeigen?

@Component({
  selector: 'app-title-card',
  template: '',
})
class TitleCardComponent {
  title = 'User Data';
}

{{ 'title' }}
{{ title }}
[title]
Ein Klassenfeld kann nicht über die Template-Syntax in einem Template angezeigt werden.

Angular.io - String Interpolation oder Text Interpolation

F11. Was ist der Zweck der valueChanges-Methode auf einem FormControl?

Sie wird verwendet, um zu konfigurieren, welche Werte für das Control erlaubt sind.
Sie wird verwendet, um den Wert eines Controls auf einen neuen Wert zu ändern. Sie würden diese Methode aufrufen und den neuen Wert für das Formularfeld übergeben. Sie unterstützt sogar das Übergeben eines Arrays von Werten, die im Laufe der Zeit gesetzt werden können.
Sie gibt einen Boolean zurück, basierend darauf, ob der Wert des Controls sich von dem Wert unterscheidet, mit dem es initialisiert wurde.
Es ist ein Observable, das jedes Mal emittiert, wenn sich der Wert des Controls ändert, sodass Sie auf neue Werte reagieren und zu diesem Zeitpunkt logische Entscheidungen treffen können.

Angular.io - Anzeigen eines Formular-Control-Werts

F12. Welche Direktive wird verwendet, um ein `<a>`-Tag mit Routing zu verknüpfen?

routeTo
routerLink
routePath
appLink

Angular.io - RouterLink

F13. Wofür wird der Output-Dekorator in dieser Komponentenklasse verwendet?

@Component({
    selector: 'app-shopping-cart',
    . . .
})
export class ShoppingCartComponent {
    @Output() itemTotalChanged = new EventEmitter();
}

Es macht das itemTotalChanged-Klassenfeld öffentlich.
Es bietet eine Möglichkeit, Werte an das itemTotalChanged-Klassenfeld zu binden, so: <app-shopping-cart [itemTotalChanged]="newTotal"></app-shopping-cart>.
Es bietet eine Möglichkeit, Ereignisse an das itemTotalChanged-Klassenfeld zu binden, so: <app-shopping-cart (itemTotalChanged)="logNewTotal($event)"></app-shopping-cart>.
Es ist einfach eine Möglichkeit, einen Kommentar vor ein Klassenfeld zur Dokumentation zu setzen.

Angular.io - Daten an übergeordnete Komponente senden

F14. Was ist der Unterschied zwischen diesen beiden Markup-Beispielen für die bedingte Handhabung der Anzeige?

<div *ngIf="isVisible">Aktiv</div>
<div [hidden]="!isVisible">Aktiv</div>

Das 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.
Sie sind grundsätzlich gleich.
Die 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.
Das ngIf ist gültig, aber die Verwendung der hidden-Eigenschaft ist falsch und wird einen Fehler werfen.

StackOverflow

F15. Wie können Sie den Submit-Button deaktivieren, wenn das Formular in diesem Template-getriebenen Formular-Beispiel Fehler hat?

<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>

<button (click)="submit(userForm.value)" disable="userForm.invalid">Speichern</button>

<button (click)="submit(userForm.value)" [disabled]="userForm.invalid">Speichern</button>

<button (click)="submit(userForm.value)" [ngForm.disabled]="userForm.valid">Speichern</button>

<button (click)="submit(userForm.value)" *ngIf="userForm.valid">Speichern</button>

Angular.io - Formular mit ngSubmit absenden

F16. Welchen Angular CLI-Befehl würden Sie verwenden, um zu sehen, welche Dateien durch das Erstellen einer neuen contact-card-Komponente generiert würden?

ng generate component contact-card --dry-run
ng generate component contact-card --no-files
ng generate component component --dry
ng generate component --exclude

Angular.io - ng generate Optionen

F17. Basierend auf der folgenden Komponente, welche Template-Syntax würden Sie verwenden, um das titleText-Feld der TitleCardComponent an die title-Eigenschaft des h1-Elements zu binden?

@Component({
  selector: 'app-title-card',
  template: '<h1 title="User Data"> {{titleText}}</h1>',
})
export class TitleCardComponent {
  titleText = 'User Data';
}

<h1 data-title="titleText">{{ titleText }}</h1>
<h1 title="titleText">{{ titleText }}</h1>
<h1 [title]="titleText">{{ titleText }}</h1>
<h1 titleText>{{ titleText }}</h1>

Angular.io - String Interpolation

F18. Was sind Angular-Lifecycle-Hooks?

Logger zur Verfolgung der Gesundheit einer Angular-App
Provider, die verwendet werden können, um die Instanzen von Komponenten zu verfolgen
Eingebaute Pipes, die in Templates für DOM-Events verwendet werden können
Reservierte benannte Methoden für Komponenten und Direktiven, die Angular während bestimmter Zeiten in seiner Ausführung aufruft und die verwendet werden können, um in diese Lifecycle-Momente einzutauchen

Angular.io - Lifecycle Hooks

F19. Wählen Sie die beste Beschreibung für diese Template-Syntax aus:

<span>Chef: {{job?.bossName}} </span>

Das ? ist eine Kurzform für die async-Pipe. Der job-Wert muss ein Observable sein.
Es verwendet den Safe-Navigation-Operator (?) auf dem job-Feld. Wenn das job-Feld undefined ist, wird der Zugriff auf bossName ignoriert und es tritt kein Fehler auf.
Es gibt einen Fehler in der Template-Syntax. Das ? ist hier nicht gültig.
Es zeigt den job-Wert an, wenn er einen hat; andernfalls zeigt es den bossName an.

StackOverflow

F20. Wie würden Sie eine Route-Definition für eine UserDetailComponent konfigurieren, die den URL-Pfad user/23 unterstützt (wobei 23 die ID des angeforderten Benutzers darstellt)?

{ path: 'user/:id', component: UserDetailComponent }
{ url: 'user/:id', routedComponent: UserDetailComponent }
{ routedPath: 'user/:id', component: UserDetailComponent }
{ destination: new UserDetailComponent(), route: 'user/:id' }

CodeCraft - Parametrisierte Routes

F21. Was machen die HostListener-Dekoratoren und der HostBinding-Dekorator in dieser Direktive?

@Directive({
  selector: '[appCallout]',
})
export class CalloutDirective {
  @HostBinding('style.font-weight') fontWeight = 'normal';

  @HostListener('mouseenter')
  onMouseEnter() {
    this.fontWeight = 'bold';
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.fontWeight = 'normal';
  }
}

Sie setzen das CalloutDirective.fontWeight-Feld basierend darauf, ob die Maus über dem DOM-Element ist oder nicht. Der HostListener setzt dann die CSS-Eigenschaft font-weight auf den fontWeight-Wert.
Sie richten die Direktive ein, um das DOM-Element zu überprüfen, auf dem sie sich befindet. Wenn es Event-Bindings für Maus-Enter und -Leave hinzugefügt hat, wird dieser Code verwendet. Andernfalls passiert nichts.
Dies ist eine falsche Verwendung von HostListener und HostBinding. Die HostListener- und HostBinding-Dekoratoren machen nichts bei Direktiven; sie funktionieren nur, wenn sie bei Komponenten verwendet werden.
Wenn das DOM-Element, auf dem diese Direktive platziert ist, die CSS-Eigenschaft font-weight gesetzt hat, werden die mouseenter- und mouseleave-Events ausgelöst.

DigitalOcean

F22. Welche Angular-Template-Syntax können Sie auf diesem Template-getriebenen Formularfeld verwenden, um auf den Feldwert zuzugreifen und die Validierung innerhalb des Template-Markups zu überprüfen?

<input type="text" ngModel name="firstName" required minlength="4" />
<span *ngIf="">Ungültige Felddaten</span>

Sie können eine Template-Referenzvariable und die exportAs-Funktion verwenden, die die ngModel-Direktive hat.
Sie können die ngModel-Direktive in Kombination mit dem Eingabefeldnamen verwenden.
Sie können eine Template-Referenzvariable für das HTML-Eingabeelement verwenden und dann die valid-Eigenschaft davon überprüfen.
Es ist nicht möglich, Zugriff auf den Feldwert mit Template-getriebenen Formularen zu erhalten. Sie müssen dafür reaktive Formulare verwenden.

F23. Welcher Werttyp wird in der headerText-Template-Referenzvariablen in diesem Markup gespeichert?

<h1 #headerText>Benutzerliste</h1>

Eine Angular ElementRef, ein Wrapper um ein natives Element
Der innere Text des <h1>-Elements
Eine Header-Komponentenklasse
Der native DOM-Elementtyp HTMLHeadingElement

Pluralsight - Template-Referenzvariable

F24. Was ist der Unterschied, falls vorhanden, der resultierenden Code-Logik basierend auf diesen beiden Provider-Konfigurationen?

[{ provide: FormattedLogger, useClass: Logger }][{ provide: FormattedLogger, useExisting: Logger }];

Sie sind gleich. Beide werden zu einer neuen Instanz von Logger führen, die an das FormattedLogger-Token gebunden ist.
Die useClass-Syntax weist den Injector an, eine neue Instanz von Logger zu erstellen und diese Instanz an das FormattedLogger-Token zu binden. Die useExisting-Syntax bezieht sich auf eine bereits existierende Objektinstanz, die als Logger deklariert ist.
Beide sind falsch. Ein starker Typ kann nicht für useClass oder useExisting verwendet werden.
Sie sind gleich. Beide werden dazu führen, dass das FormattedLogger-Token ein Alias für die Instanz von Logger ist.

F25. Was ist der Zweck der data-Eigenschaft (im folgenden Beispiel zu sehen) in einer Route-Konfiguration?

   {
       path: 'customers',
       component: CustomerListComponent,
       data: { accountSection: true }
   }

Ein Key/Value-Mapping zum Setzen von @Input-Werten auf der gerouteten Komponenteninstanz
Eine Möglichkeit, statische, schreibgeschützte Daten einzuschließen, die mit der Route verknüpft sind und die von der ActivatedRoute abgerufen werden können
Eine Eigenschaft auf der Route, die verwendet werden kann, um dynamische Daten für die Route zu laden
Ein Objekt, das automatisch in den Konstruktor der gerouteten Komponente injiziert wird.

F26. Wie ändert die eingebaute strukturelle `ngIf`-Direktive das gerenderte DOM basierend auf dieser Template-Syntax?

@Component({
  selector: 'app-product',
  template: '<div *ngIf="product">{{ product.name }}</div>',
})
export class ProductComponent {
  @Input() product;
}

Das <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.
Das <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.
Es erzeugt einen Fehler, da ngIf keine eingebaute strukturelle Direktive ist.
Wenn das product-Klassenfeld "truthy" ist, dann enthält das gerenderte DOM das <div> mit dem Wert des product.name-Felds. Wenn es nicht "truthy" ist, enthält das gerenderte DOM nicht das <div>-Element.

Referenz (angular.io)

F27. Was bewirkt dieser Code?

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Es führt einen Unit-Test für ein NgModule aus.
Es bietet eine Möglichkeit, die Dokumentstruktur einer Angular-Anwendung zu codieren. Das @NgModule ist eine Form von Inline-Code-Kommentierung, die vom TypeScript-Compiler ignoriert wird, aber mit spezieller Formatierung in Code-Editor-Anwendungen angezeigt wird.
Es deklariert ein Angular-Modul namens AppModule und macht es für Lazy Loading in der gesamten Anwendung verfügbar.
Es deklariert ein Angular-Modul namens AppModule, das eine Bootstrap-Komponente namens AppComponent enthält. Dann registriert es dieses Modul bei Angular, damit die App starten kann.

Angular.io - Das grundlegende NgModule

F28. Welche Wahl beschreibt am besten, was die resolve-Eigenschaft in dieser Route-Konfiguration macht?

{
   path: ':id',
   component: UserComponent,
   resolve: {
     user: UserResolverService
   }
}

Vor dem Laden der UserComponent wird der Router das Observable abonnieren, das von einer resolve-Methode im UserResolverService zurückgegeben wird. Diese Technik kann verwendet werden, um vorgeladene Daten für eine Route zu erhalten.
Nachdem die Route aufgelöst wurde und die Komponente geladen und gerendert ist, wird der UserResolverService eine Methode namens user ausführen, die alle offenen Datenverbindungen bereinigt.
Es gibt einen Fehler. Der korrekte Eigenschaftsname ist onResolve.
Die UserComponent wird einen Parameter in ihrem Konstruktor für user haben, und der Router wird das Injizieren eines Werts dafür von einem Aufruf einer user-Methode im UserResolverService handhaben.

angular.io

F29. Was ist der Zweck des ContentChildren-Dekorators in dieser Komponentenklasse?

@Component({
 . . .
 template: '<ng-content></ng-content>'
})
export class TabsListComponent {
 @ContentChildren(TabComponent) tabs;
}

Wenn TabsComponent-Elemente zum TabsListComponent-Template hinzugefügt werden, werden sie zur Laufzeit in das <ng-content>-Element eingefügt.
Es erstellt TabComponent-Komponenten im TabsListComponent-Template, wenn eine TabsListComponent instanziiert wird.
Es bietet Zugriff von innerhalb der Komponentenklasse auf alle TabComponent-Komponenten, die in das <ng-content> für diese Komponente projiziert wurden.
Es beschränkt die erlaubten Elemente, die in ein TabsListComponent-Element eingefügt werden können, um nur TabComponent-Elemente zuzulassen.

betterprogramming.pub

F30. Damit Angular Komponenten in einer Anwendung verarbeiten kann, wo müssen die Komponententypen registriert werden?

Innerhalb eines script-Tags in der index.html-Datei
In einem NgModule-Dekorator-Metadaten-Tag namens components
Keine Registrierung ist erforderlich, fügen Sie einfach die Komponentendateien in ein App-Verzeichnis ein.
In einer NgModule-Dekorator-Metadaten-Eigenschaft namens declarations

angular.io

F31. Was ist der Zweck des `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,
);

Es verfolgt alle potenziellen UI-Änderungen und lässt den Unit-Test fehlschlagen, wenn welche vorgenommen werden.
Es wird verwendet, um die Stabilität des Komponenten-Templates über mehrere Unit-Tests in der gesamten Test-Suite hinweg zu gewährleisten.
Es zwingt Angular, Change Detection durchzuführen, was die UserCardComponent rendert, bevor Sie ihr Template validieren können.
Es wird verwendet, um Change-Detection-Events während Unit-Test-Läufen in der Konsole zu protokollieren.

angular.io

F32. Wie wird das URL-Segment aussehen, basierend auf dem folgenden Aufruf der `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]);
  }
}

/user/15
/user?id=15
/user:15
/user;id=15

angular.io

F33. Wenn ein Service für root bereitgestellt wird und auch zur Provider-Konfiguration für ein Lazy-Loaded-Modul hinzugefügt wird, welche Instanz dieses Services stellt der Injector Konstruktoren im Lazy-Loaded-Modul bereit?

Eine neue Instanz dieses Services wird erstellt, wenn das Modul lazy geladen wird.
Das Bereitstellen eines Services desselben Typs auf der Ebene eines Lazy-Loaded-Moduls ist nicht erlaubt.
Wenn eine Instanz des Services noch nicht auf der Root-Ebene erstellt wurde, wird eine dort erstellt und dann verwendet.
Eine einzelne Instanz dieses Services wird immer auf der Root-Ebene instanziiert und ist die einzige, die jemals verwendet wird, einschließlich innerhalb von Lazy-Modulen.

F34. Was macht der HostBinding-Dekorator in dieser Direktive?

@Directive({
  selector: ' [appHighlight] ',
})
export class HighlightDirective {
  @HostBinding('class.highlighted') highlight = true;
}

Er fügt die CSS-Klasse namens highlighted zu jedem DOM-Element hinzu, das die appHighlight-Direktive darauf hat.
HostBinding macht nichts bei Direktiven, nur bei Komponenten.
Er spezifiziert, dass wenn das Host-Element die highlighted-Klasse zu seinem class-Attribut hinzugefügt bekommt, dann das Direktiven-Klassenfeld highlight auf true gesetzt wird; und wenn es nicht auf dem Host hinzugefügt wird, wird es auf false gesetzt.
Er erstellt einen Inline-Stil auf dem Host-Element mit einer CSS-Eigenschaft namens highlight, die auf true gesetzt ist.

StackOverflow

F35. In reaktiven Formularen, welcher Angular-Formularklassentyp wird auf dem nativen DOM-`<form>`-Element verwendet, um es zu verdrahten?

FormArray
FormControl
FormGroup
alle diese Antworten

F36. Angenommen, das username-FormControl wurde mit einem minLength-Validator konfiguriert, wie können Sie eine Fehleranzeige im folgenden reaktiven Formular-Markup für das username-Feld einrichten?

<form [formGroup]="form">
  <input type="text" formControlName="username" />
  ...
</form>

<span *ngIf="username.minLength.invalid"> Benutzername-Länge ist nicht gültig </span>

<input type="text" formControlName="username" [showMinLength]="true" />

<span *ngIf="form.get('username').getError('minLength') as minLengthError">
  Benutzername muss mindestens {{ minLengthError.requiredLength }} Zeichen lang sein.
</span>

<input type="text" formControlName="username" #userName="ngModel" />
<span *ngIf="userName.errors.minlength">
  Benutzername muss mindestens {{ userName.errors.minlength.requiredLength }} Zeichen lang sein.
</span>

Codecraft

F37. Wie handhabt der emulierte View-Encapsulation-Modus CSS für eine Komponente?

Er rendert das CSS genau so, wie Sie es geschrieben haben, ohne Änderungen.
Er macht Gebrauch von Shadow-DOM-Markup und CSS.
Er erstellt eindeutige Attribute für DOM-Elemente und beschränkt die CSS-Selektoren, die Sie schreiben, auf diese Attribut-IDs.
Er rendert alle CSS-Regeln, die Sie schreiben, als Inline-CSS auf allen DOM-Elementen, die Sie im Template verwenden.

Angular.io

F38. Mit dem folgenden TestBed-Setup, was kann verwendet werden, um auf das gerenderte DOM für die UserCardComponent zuzugreifen?

TestBed.configureTestingModule({
  declarations: [UserCardComponent],
});
let fixture = TestBed.createComponent(UserCardComponent);

fixture.componentTemplate
fixture.getComponentHtml()
fixture.nativeElement
fixture.componentInstance.template

F39. Gegeben diese beiden Komponenten, was wird basierend auf der Markup-Verwendung in das DOM gerendert?

@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>

<app-card>
  <h1>Datenkarte</h1>
  <app-bio> Seit vier Jahren dabei. </app-bio>
</app-card>

<h1>Datenkarte</h1>
<app-bio>Seit vier Jahren dabei.</app-bio>

<app-card>
  <h1>Datenkarte</h1>
  <ng-content></ng-content>
  <app-bio> Seit vier Jahren dabei. <ng-content></ng-content> </app-bio>
</app-card>

<app-card>
  <h1>Datenkarte</h1>
</app-card>

F40. Gegeben die app-title-card-Komponente im folgenden Code, welches DOM wird die app-user-card-Komponente rendern?

@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>

<app-user-card>
  <app-title-card>
    <h1>Benutzerdaten</h1>
  </app-title-card>
  <p>Jenny Smith</p>
</app-user-card>

<h1>Benutzerdaten</h1>
<p>Jenny Smith</p>
<p></p>

<app-user-card>
  <app-title-card></app-title-card>
</app-user-card>

<div app-user-card>
  <h1 app-title-card>Benutzerdaten</h1>
  <p>Jenny Smith</p>
</div>

F41. Wählen Sie den passenden Code für die benutzerdefinierte Provider-Registrierung aus, nach der der @Inject()-Dekorator sucht:

constructor(@Inject('Logger') private logger) { }

A
```
providers: [Logger];
```

providers: [{ provide: 'Logger', useClass: Logger }];

C
```
@Injectable({
    providedln: 'root'
})
```
D
```
providers: [{ provide: 'Logger' }];
```

F42. Welche Wahl beschreibt am besten die folgende Verwendung der HttpClient.get-Methode in der getsettings-Klassenmethode?

export class SettingsService {
    constructor(private httpClient: HttpClient) { }
    ...

getSettings()
{
    return this.httpClient.get<Settings>(this.settingsUrl)
        .pipe(
            retry(3)
        );
}}

Die RxJs-pipe-Methode ist ein Alias für die subscribe-Methode, sodass ein Aufruf von getSettings die get-Abfrage ausführt. Der retry-Operator wird verwendet, um dem pipe-Aufruf mitzuteilen, die get-Abfrage dreimal zu wiederholen.
Es wird zur Laufzeit einen Fehler erzeugen, da die pipe-Methode nicht vom Httpclient.get-Aufruf verfügbar ist.
Jeder einzelne Aufruf der getSettings-Methode wird dazu führen, dass der Httpclient insgesamt drei get-Anfragen an die settingsUrl macht, was nicht ideal ist, da es immer zwei zusätzliche Aufrufe geben wird, die nicht benötigt werden. Der retry-Operator sollte nicht auf diese Weise verwendet werden.
Wenn das Ergebnis der getSettings-Methode abonniert wird, wird der HTTP GET-Aufruf gemacht; wenn er fehlschlägt, wird er bis zu dreimal wiederholt, bevor er aufgibt und einen Fehler zurückgibt.

F43. Wenn ein Service eine gewisse Einrichtung benötigt, um seinen Standardzustand durch eine Methode zu initialisieren, wie können Sie sicherstellen, dass diese Methode aufgerufen wird, bevor der Service irgendwo injiziert wird?

Legen Sie die Logik dieser Service-Methode stattdessen in den Service-Konstruktor.
Verwenden Sie einen Factory-Provider auf der Root-AppModule-Ebene, der vom Service abhängt, um diese Service-Methode aufzurufen.
Es ist nicht möglich, dies beim Anwendungsstart zu tun; Sie können es nur auf Komponentenebene tun.
Instanziieren Sie eine Instanz des Services auf globaler Ebene (Window-Scope) und rufen Sie dann diese Methode auf.

F44. Was beschreibt diese Verwendung des TestBed am besten?

const spy = jasmine.createSpyObj('DataService', ['getUsersFromApi']);
TestBed.configureTestingModule({
  providers: [UserService, { provide: DataService, useValue: spy }],
});
const userService = TestBed.get(UserService);

Das TestBed ist erforderlich, wenn Sie ein Spy-Objekt in einem Unit-Test für einen Angular-Provider verwenden möchten.
Das TestBed wird verwendet, um die Ansicht einer Komponente zu testen.
Das TestBed erstellt ein NgModule mit zwei Providern und behandelt alle Dependency Injection. Wenn eine Angular-Klasse den DataService in ihrem Konstruktor anfordert, wird das TestBed spy in diesem Konstruktor injizieren.
Das TestBed konfiguriert den Test-Runner, um ihm mitzuteilen, dass er nur Tests für die beiden Provider ausführt, die in seinem providers-Array aufgelistet sind.

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.

F45. Was ist der Hauptunterschied zwischen einer Komponente und einer Direktive?

Eine Komponente verwendet eine selector-Metadaten-Eigenschaft und eine Direktive nicht.
Eine Direktive kann verwendet werden, um benutzerdefinierte Events zum DOM hinzuzufügen, und eine Komponente kann das nicht.
Eine Komponente hat ein Template und eine Direktive nicht.
Eine Direktive kann nur native DOM-Elemente ansprechen.

StackOverflow

F46. Was könnten Sie zu dieser Direktivenklasse hinzufügen, um die Truncate-Länge während der Direktiven-Verwendung im Markup festzulegen?

@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.

F47. Wie können Sie Query-Parameter an diese `HttpClient.get`-Anfrage übergeben?

export class OrderService {
  constructor(private httpClient: HttpClient) {}

  getOrdersByYear(year: number): Observable<Order[]> {
    return this.httpClient.get<Order[]>(this.ordersUrl);
  }
}

A return this.httpClient.get<Order[]>(this.ordersUrl, {'year': year})
B return this.httpClient.get<Order[]>(this.ordersUrl, year)

const options = { params: new HttpParams().set('year', year) };
return this.httpClient.get<Order[]>(this.ordersUrl, options);

getOrdersByYear(year: number): Observable<Order[]> {
    return this.httpClient.addParam('year', year).get<Order[]>(this.ordersUrl, year);
}

F48. Angenommen, der `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) {}
    ...
}

Es deklariert, dass die 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.
Wenn Angular eine neue Instanz der 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.
Es bietet eine Möglichkeit, nur Komponententests durchzuführen; der Konstruktor hat keine Verwendung im tatsächlichen Betrieb der Angular-Anwendung.
Es ermöglicht es dem benutzerdefinierten Element, auf das die Komponente abzielt, eine benutzerdefinierte Eigenschaft namens dataService zu haben, die verwendet werden kann, um eine existierende DataService-Instanz zu binden.

F49. Vervollständigen Sie dieses Markup mit der `ngIf`-Direktive, um einen else-Fall zu implementieren, der den Text "Benutzer ist nicht aktiv" anzeigt:

<div *ngIf="userIsActive; else inactive">Derzeit aktiv!</div>

<div #inactive>Benutzer ist nicht aktiv.</div>

<div *ngIf="inactive">Benutzer ist nicht aktiv.</div>

<ng-template #else="inactive">
  <div>Benutzer ist nicht aktiv.</div>
</ng-template>

<ng-template #inactive>
  <div>Benutzer ist nicht aktiv.</div>
</ng-template>

Angular.io

F50. Was ist die korrekte Syntax für eine Route-Definition zum Lazy Loading eines Feature-Moduls?

{
  path: 'users',
  lazy: './users/users.module#UsersModule'
}

{
  path: 'users',
  loadChildren: () => import('./users/users.module').then(m => m.UserModule)
}

{
  path: 'users',
  loadChildren: './users/users.module#UsersModule'
}

{
  path: 'users',
  module: UsersModule
}

Angular.io - Lazy Loading Modules

F51. Beschreiben Sie, wie die Validierung in diesem reaktiven Formular-Beispiel eingerichtet und konfiguriert ist:

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};
    }
}

Das FormControl für username wird konfiguriert, um drei Validatoren von den Validatoren auszuschließen, die es verwenden darf.
Das 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.
Validierung kann auf diese Weise in reaktiven Formularen nicht eingerichtet werden.
Das 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.

F52. Was macht der Injectable-Dekorator auf dieser Service-Klasse?

@Injectable({
    providedIn: 'root'
)}
export class DataService { }

Er registriert einen Provider für den Service, der nur auf der Root-Modul-Ebene verfügbar ist, nicht für untergeordnete Module.
Er registriert einen Provider für den Service im Root-Anwendungs-Injector, wodurch eine einzelne Instanz davon in der gesamten Anwendung verfügbar gemacht wird.
Er macht es so, dass der Service nur in der Bootstrap-Komponente für die Anwendung injiziert werden kann.
Er richtet eine Kompilierzeit-Regel ein, die es Ihnen erlaubt, den Service-Typ nur in die providers-Metadaten-Eigenschaft des Root-NgModuls zu setzen.

Angular.io

F53. Beschreiben Sie die Verwendung dieses Codes

export interface AppSettings {
  title: string;
  version: number;
}
export const APP_SETTINGS = new InjectionToken<AppSettings>('app.settings');

Das InjectionToken fügt eine Instanz der AppSettings zum Root-Provider über den InjectionToken-Konstruktor-Aufruf hinzu und macht es automatisch für alle NgModules, Services und Komponenten in der gesamten Angular-Anwendung verfügbar, ohne dass es irgendwo injiziert werden muss.
Das InjectionToken wird verwendet, um ein Provider-Token für eine Nicht-Klassen-Abhängigkeit zu erstellen. Ein Objekt-Literal kann als Wert für den APP_SETTINGS-Dependency-Provider-Typ bereitgestellt werden, der dann in Komponenten, Services usw. injiziert werden kann.
Das InjectionToken wird verwendet, um einen dynamischen Dekorator für die AppSettings zu erstellen, der auf Konstruktor-Parametern über einen @AppSettings-Dekorator verwendet werden kann.
Dieser Code hat einen Fehler, da Sie kein TypeScript-Interface für den generischen Typ auf dem InjectionToken verwenden können

F54. Für das folgende Template-getriebene Formular-Beispiel, welches Argument kann an die submit-Methode im click-Event übergeben werden, um die Daten für das Formular zu übermitteln?

<form #form="ngForm">
  <input type="text" ngModel="firstName" /> <input type="text" ngModel="lastName" />
  <button (click)="submit()">Speichern</button>
</form>

submit(form.value)
submit($event)
submit(ngForm.value)
submit(FirstName, lastName)

F55. Was ist der Zweck der `prelodingStrategy`-Eigenschaftskonfiguration in diesem Router-Code?

RouterModule.forRoot(
  ...{
    preloadingStrategy: PreloadAllModules,
  },
);

Es aktiviert die Option, einzelne Routen für das Vorladen zu markieren.
Es lädt alle Abhängigkeiten für Routen vor und erstellt Instanzen von Services, wenn die App zum ersten Mal startet
Es stellt sicher, dass alle Module in eine einzelne App-Modul-Bundle-Datei gebaut werden.
Es konfiguriert den Router, um sofort alle Routen zu laden, die eine loadChildren-Eigenschaft haben (Routen, die normalerweise bei Bedarf geladen werden)

Referenzen:

F56. Was ist eine alternative Möglichkeit, dieses Markup zu schreiben, um den Wert des Klassenfelds `userName` an die title-Eigenschaft des h1-Elements zu binden?

<h1 [title]="userName">Aktueller Benutzer ist {{ userName }}</h1>

title="userName"
title="{{ userName }}"
title="{{ 'userName' }}"
Der einzige Weg, dies zu tun, ist die Verwendung der eckigen Klammern.

F57. Was macht die `async`-Pipe in diesem Beispiel?

@Component({
  selector: 'app-users',
  template: '<div *ngFor="let user of users | async">{{ user.name }}</div>',
})
export class UsersComponent implements OnInit {
  users;
  constructor(private httpClient: HttpClient) {}
  ngOnInit(): void {
    this.users = this.httpClient.get<{ name: string }>('users');
  }
}

Sie macht nichts, da die async-Pipe nicht in einer ngFor-Anweisung verwendet werden kann.
Sie konfiguriert die ngFor-Iteration, um mehrere Listen von Benutzern gleichzeitig zu unterstützen.
Sie abonniert das Observable, das von der HttpClient.get-Methode zurückgegeben wird, und entpackt den zurückgegebenen Wert, sodass er in der ngFor iteriert werden kann.
Sie ermöglicht es, dass alle Benutzer im users-Feld gleichzeitig zum DOM gerendert werden.

F58. Wie würden Sie diese Direktive im Markup basierend auf ihrem Selektor-Wert verwenden?

@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>

F59. Welcher Lifecycle-Hook kann auf einer Komponente verwendet werden, um alle Änderungen an @Input-Werten auf dieser Komponente zu überwachen?

ngOnInit
ngChanges
ngAfterInputChange
ngOnChanges

Wie erkennt man, wann sich ein @Input()-Wert in Angular ändert?

F60. Was wäre ein Beispiel für die Template-Syntax-Verwendung dieser benutzerdefinierten Pipe?

@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 Text' | truncate:10 }}
{{ 'langer Text' | truncate: 10, true }}
{{ 'langer Text' | truncate }}
alle diese Antworten

Wie rufe ich eine Angular 2 Pipe mit mehreren Argumenten auf?

F61. Welchen Angular CLI-Befehl würden Sie ausführen, um eine UsersComponent zu generieren und sie zum SharedModule hinzuzufügen (in der Datei shared.module.ts in Ihrer Anwendung)?

ng generate component --newModule=shared
ng generate component users --module=shared
ng generate component users --shared
ng generate component --add=shared

F62. Wie können Sie dieses Markup umschreiben, sodass der div-Container im finalen DOM-Rendering nicht benötigt wird?

<div *ngIf="location">
  <h1>{{ location.name }}</h1>
  <p>{{ location.description }}</p>
</div>

<div *ngIf="location">
  <h1>{{ location.name }}</h1>
  <p>{{ location.description }}</p>
  {{ endNgIf }}
</div>

<ng-template *ngIf="location">
  <h1>{{ location.name }}</h1>
  <p>{{ location.description }}</p>
</ng-template>

<div *ngIf="location" [display]=" ' hidden' ">
  <h1>{{ location.name }}</h1>
  <p>{{ location.description }}</p>
</div>

<ng-container *ngIf="location">
  <h1>{{ location.name }}</h1>
  <p>{{ location.description }}</p>
</ng-container>

F63. Wie können Sie die Template-Syntax verwenden, um ein Komponenten-Klassenfeld namens tabWidth an eine Inline-Style-CSS-Eigenschaft width auf diesem Element zu binden?

{% raw %}{{ width: tabWidth }}{% endraw %}
[width]="tabWidth"
[inline.width]="tabWidth"
[style.width.px]="tabWidth"

F64. Welche Angular-Utilities, falls vorhanden, sind erforderlich, um einen Service ohne Konstruktor-Abhängigkeiten per Unit-Test zu testen?

Die By.css()-Hilfsmethode wird benötigt
Eine Text-Fixture ist erforderlich, um den Service für den Unit-Test auszuführen.
Keine. Ein Service kann instanziiert und eigenständig per Unit-Test getestet werden.
Die TestBed-Klasse wird benötigt, um den Service zu instanziieren.

Angular Unit-Tests - Antworten erneut prüfen

F65. Was ist der Unterschied zwischen den CanActivate- und den CanLoad-Route-Guards?

CanActivate wird verwendet, um den Zugriff zu überprüfen. CanLoad wird verwendet, um Daten für die Route vorzuladen.
CanLoad wird beim App-Start verwendet, um das Hinzufügen von Routen zur Route-Tabelle zu erlauben oder zu verweigern. CanActivate wird verwendet, um den Zugriff auf Routen zum Zeitpunkt ihrer Anforderung zu verwalten.
CanActivate und CanLoad machen genau dasselbe.
CanLoad verhindert, dass ein gesamtes NgModule ausgeliefert und geladen wird. CanActivate stoppt das Routing zu einer Komponente in diesem NgModule, aber dieses Modul wird trotzdem geladen.

CanActivate vs Canload CanActivate verhindert den Zugriff auf Routen, CanLoad verhindert Lazy Loading.

F66. Wofür wird die outlet-Eigenschaft in diesem Router-Definitionsobjekt verwendet?

{  path: 'document',  component: DocumentComponent,  outlet: 'document-box'
}

Es findet alle Instanzen von <document-box> im DOM und fügt bei der Routen-Navigation ein DocumentComponent-Element in sie ein.
Es deklariert, dass die DocumentComponent zusätzlich zum Routing als Kind eines <document-box>-Elements verwendet werden kann.
Es wird verwendet, um ein <router-outlet>-Element mit dem name-Attribut, das mit dem String-Wert übereinstimmt, als Ort für das Rendern der DocumentComponent beim Routing anzusprechen.
Es ist eine Stromquelle für den Router. (definitiv nicht die Antwort :P)

Angular-outlet - Antwort erneut prüfen

F67. In dieser Template-Syntax führt die ngFor-Strukturdirektive jedes Mal, wenn die items-Eigenschaft geändert wird (hinzugefügt, entfernt usw.), ihre Logik für alle DOM-Elemente in der Schleife erneut aus. Welche Syntax kann verwendet werden, um dies performanter zu machen?

<div *ngFor="let item of items">{{ item.id }} - {{ item.name }}</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

F68. Was macht dieser Angular CLI-Befehl?

ng build --configuration=production --progress=false

Er baut die Angular-Anwendung, setzt die Build-Konfiguration auf das "production"-Ziel, das in der angular.json-Datei angegeben ist, und protokolliert die Fortschrittsausgabe in der Konsole.
Er baut die Angular-Anwendung, setzt die Build-Konfiguration auf das "production"-Ziel, das in der angular.json-Datei angegeben ist, und überwacht Dateien auf Änderungen.
Er baut die Angular-Anwendung, setzt die Build-Konfiguration auf das "production"-Ziel, das in der angular.json-Datei angegeben ist, und deaktiviert das Überwachen von Dateien auf Änderungen.
Er baut die Angular-Anwendung, setzt die Build-Konfiguration auf das "production"-Ziel, das in der angular.json-Datei angegeben ist, und verhindert die Fortschrittsausgabe in der Konsole.

Angular-Dokumentation - ng build

F69. Service-Klassen können als Provider über welche Dekoratoren registriert werden?

@Injectable, @NgModule, @Component und @Directive.
Nur @Injectable.
Nur @Injectable und @NgModule.
Nur @Service und @NgModule.

F70. Wofür wird der Input-Dekorator in dieser Komponentenklasse verwendet?

@Component({  selector:'app-product-name',  ...
})
export class ProductNameComponent {  @Input() productName: string
}

Er wird einfach verwendet, um einen Kommentar vor ein Klassenfeld zur Dokumentation zu setzen.
Er bietet eine Möglichkeit, Werte an das productName-Feld zu binden, indem der Komponenten-Selektor verwendet wird.
Er generiert automatisch ein html <input type='text' id='productName'> DOM-Element im Komponenten-Template.
Er bietet eine Möglichkeit, Werte an das productName-Instanzfeld zu binden, genau wie native DOM-Element-Property-Bindings. Angular-Dokumentation - Input()

F71. Welcher Route-Guard kann verwendet werden, um die Navigation zu einer Route zu vermitteln?

alle diese Antworten.
CanDeactivate.
CanLoad
CanActivate. Angular-Dokumentation - Input()

F72. Wie können Sie den Injector konfigurieren, um ein vorhandenes Objekt für ein Token zu verwenden, anstatt eine Klasseninstanz zu instanziieren?

Verwenden Sie die useValue-Provider-Konfiguration und setzen Sie diese gleich einem vorhandenen Objekt oder einem Objekt-Literal.
Es ist nicht möglich. Provider können nur mit Klassentypen konfiguriert werden.
Fügen Sie einfach die Objektinstanz oder das Literal zum Provider-Array hinzu.
Nutzen Sie die asValue-Provider-Konfigurationseigenschaft und setzen Sie sie auf true.

Konfiguration von Dependency-Providern

F73. Basierend auf dieser Route-Definition, was kann in den UserDetailComponent-Konstruktor injiziert werden, um den id-Route-Parameter zu erhalten?

{path: 'user/:id', component: UserDetailComponent }

ActivatedRoute
CurrentRoute
UrlPath
@Inject('id')

Häufige Routing-Aufgaben

F74. Mit dem folgenden reaktiven Formular-Markup, was würden Sie hinzufügen, um einen Aufruf an eine onSubmit-Klassenmethode zu verdrahten?

<form [formGroup]="form">
  <input type="text" formControlName="username" />
  <button type="submit" [disabled]="form. invalid">Absenden</button>
</form>

keine dieser Antworten
Fügen Sie (click)="onSubmit()" zum <button>-Element hinzu.
Fügen Sie (ngSubmit )="onSubmit ()" zum <form>-Element hinzu.
beide dieser Antworten

Angular - Formulare

F75. Was ist der erwartete DOM-Code für diese Verwendung des ngClass-Attribut-Direktivs, wenn isActive true ist?

<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>

Angular - NgClass

F76. Welche Antwort erklärt am besten die Verwendung von ngModel in diesem Template-Code?

<input [(ngModel)]="user.name" />

Es zeigt das Eingabeelement bedingt an, wenn die user.name-Eigenschaft einen Wert hat.
Es ist die bidirektionale Datenbindungs-Syntax. Die value-Eigenschaft des Eingabeelements wird an die user.name-Eigenschaft gebunden, und das Wertänderungs-Event für das Formularelement aktualisiert den user.name-Eigenschaftswert.
Es gibt einen Tippfehler im Code. Es sollte nur die eckigen Klammern haben.
Es bindet den Wert der user.name-Eigenschaft an die val-Eigenschaft des Eingabeelements, um seinen Anfangswert zu setzen.

Angular - NgModel

F77. NgModules können innerhalb anderer NgModules enthalten sein. Welches Code-Beispiel sollten Sie verwenden, um TableModule in SharedModule einzuschließen?

@NgModule({ exports: [TableModule] }) export class SharedModule {}

text

@NgModule({ imports: [TableModule] }) export class SharedModule {}

text

@NgModule({ declarations: [TableModule] }) export class SharedModule {}

text

@NgModule({ providers: [TableModule] }) export class SharedModule {}

F78. Welche andere Template-Syntax (die die ngClass-Direktive ersetzt) kann verwendet werden, um die CSS-Klassennamen in diesem Markup hinzuzufügen oder zu entfernen?

<span [ngClass]="{ 'active': isActive, 'can-toggle': canToggle }"> Beschäftigt </span>

<span class="{{ isActive ? 'is-active' : '' }} {{ canToggle ? 'can-toggle' : '' }}">
  Beschäftigt
</span>

<span [class.active]="isActive" [class.can-toggle]="canToggle"> Beschäftigt </span>

<span [styles.class.active]="isActive" [styles.class.can-toggle]="canToggle"> Beschäftigt </span>

<span [css.class.active]="isActive" [css.class.can-toggle]="canToggle"> Beschäftigt </span>

F79. In diesem Direktiven-Dekorator-Beispiel, was ist der Zweck der multi-Eigenschaft im Provider-Objekt-Literal?

@Directive({
  selector: '[customValidator]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: CustomValidatorDirective,
      multi: true,
    },
  ],
})
export class CustomValidatorDirective implements Validator {}

Es zeigt an, dass die CustomValidatorDirective auf mehreren Formularelement-Typen verwendet werden kann.
Es erlaubt die Instanziierung mehrerer Instanzen der CustomValidatorDirective. Ohne multi wäre die CustomValidatorDirective ein Singleton für die gesamte App.
Es erlaubt die Registrierung verschiedener Provider für das einzelne NG_VALIDATORS-Token. In diesem Fall wird die CustomValidatorDirective zur Liste der verfügbaren Formular-Validatoren hinzugefügt.
Es zeigt an, dass es mehrere Klassen geben wird, die die Logik-Implementierung für den benutzerdefinierten Validator handhaben.

StackOverflow

F80. Welchen Angular CLI-Befehl würden Sie verwenden, um Ihre Unit-Tests in einem Prozess auszuführen, der Ihre Test-Suite bei Dateiänderungen erneut ausführt?

ng test --single-run=false
ng test --watch-files
ng test --progress
ng test

F81. Was ist die häufigste Verwendung für den ngOnDestory-Lifecycle-Hook?

Entfernen von DOM-Elementen aus der Ansicht der Komponente
Löschen von injizierten Services
Abmelden von Observables und Trennen
Alle oben genannten

F82. Welche NgModule-Dekorator-Metadaten-Eigenschaft wird genutzt, um anderen zu erlauben...?

public
experts
Shared
declarations

F83. Mit der folgenden Komponentenklasse, welche Template-Syntax würden Sie im Template verwenden, um das Ergebnis des Aufrufs der currentYear-Klassenfunktion anzuzeigen?

@Component({
  selector: 'app-date-card',
  template: '',
})
export class DateCardComponent {
  currentYear() {
    return new Date().getFullYear();
  }
}

{% raw %}{{ currentYear() }}{% endraw %}
{% raw %}{{ component.currentYear() }}{% endraw %}
{% raw %}{{ currentYear }}{% endraw %}
Klassenfunktionen können nicht aus der Template-Syntax aufgerufen werden.

FilesExpand file tree

angular-quiz-de.md

Latest commit

History

angular-quiz-de.md

File metadata and controls

Angular

F1. Was ist der Zweck des ViewChild-Dekorators in dieser Komponentenklasse?

F2. Welche Methode wird verwendet, um ein FormControl in reaktiven Formularen mit einem nativen DOM-Eingabeelement zu verbinden?

F3. Was ist der Unterschied zwischen paramMap und queryParamMap in der ActivatedRoute-Klasse?

F4. Basierend auf der folgenden Verwendung der async-Pipe und unter der Annahme, dass das Klassenfeld users ein Observable ist, wie viele Subscriptions zum users-Observable werden erstellt?

F5. Wie können Sie den HttpClient verwenden, um eine POST-Anfrage an einen Endpunkt aus einer addOrder-Funktion in diesem OrderService zu senden?

F6. Wofür wird die RouterModule.forRoot-Methode verwendet?

F7. Welche DOM-Elemente werden mit diesem Komponenten-Metadaten-Selektor übereinstimmen?

F8. Was ist die korrekte Template-Syntax für die Verwendung der eingebauten strukturellen ngFor-Direktive, um eine Liste von productNames zu rendern?

F9. Was sind die beiden Komponenten-Dekorator-Metadaten-Eigenschaften, die verwendet werden, um CSS-Stile für eine Komponente einzurichten?

F10. Mit der folgenden Komponentenklasse, welche Template-Syntax würden Sie im Template verwenden, um den Wert des title-Klassenfelds anzuzeigen?

F11. Was ist der Zweck der valueChanges-Methode auf einem FormControl?

F12. Welche Direktive wird verwendet, um ein <a>-Tag mit Routing zu verknüpfen?

F13. Wofür wird der Output-Dekorator in dieser Komponentenklasse verwendet?

F14. Was ist der Unterschied zwischen diesen beiden Markup-Beispielen für die bedingte Handhabung der Anzeige?

F15. Wie können Sie den Submit-Button deaktivieren, wenn das Formular in diesem Template-getriebenen Formular-Beispiel Fehler hat?

F16. Welchen Angular CLI-Befehl würden Sie verwenden, um zu sehen, welche Dateien durch das Erstellen einer neuen contact-card-Komponente generiert würden?

F17. Basierend auf der folgenden Komponente, welche Template-Syntax würden Sie verwenden, um das titleText-Feld der TitleCardComponent an die title-Eigenschaft des h1-Elements zu binden?

F18. Was sind Angular-Lifecycle-Hooks?

F19. Wählen Sie die beste Beschreibung für diese Template-Syntax aus:

F20. Wie würden Sie eine Route-Definition für eine UserDetailComponent konfigurieren, die den URL-Pfad user/23 unterstützt (wobei 23 die ID des angeforderten Benutzers darstellt)?

F21. Was machen die HostListener-Dekoratoren und der HostBinding-Dekorator in dieser Direktive?

F22. Welche Angular-Template-Syntax können Sie auf diesem Template-getriebenen Formularfeld verwenden, um auf den Feldwert zuzugreifen und die Validierung innerhalb des Template-Markups zu überprüfen?

F23. Welcher Werttyp wird in der headerText-Template-Referenzvariablen in diesem Markup gespeichert?

F24. Was ist der Unterschied, falls vorhanden, der resultierenden Code-Logik basierend auf diesen beiden Provider-Konfigurationen?

F25. Was ist der Zweck der data-Eigenschaft (im folgenden Beispiel zu sehen) in einer Route-Konfiguration?

F26. Wie ändert die eingebaute strukturelle ngIf-Direktive das gerenderte DOM basierend auf dieser Template-Syntax?

F27. Was bewirkt dieser Code?

F28. Welche Wahl beschreibt am besten, was die resolve-Eigenschaft in dieser Route-Konfiguration macht?

F29. Was ist der Zweck des ContentChildren-Dekorators in dieser Komponentenklasse?

F30. Damit Angular Komponenten in einer Anwendung verarbeiten kann, wo müssen die Komponententypen registriert werden?

F31. Was ist der Zweck des fixture.detectChanges()-Aufrufs in diesem Unit-Test?

F32. Wie wird das URL-Segment aussehen, basierend auf dem folgenden Aufruf der Router.navigate-Methode, wenn goToUser mit dem Wert 15 übergeben wird?

F33. Wenn ein Service für root bereitgestellt wird und auch zur Provider-Konfiguration für ein Lazy-Loaded-Modul hinzugefügt wird, welche Instanz dieses Services stellt der Injector Konstruktoren im Lazy-Loaded-Modul bereit?

F34. Was macht der HostBinding-Dekorator in dieser Direktive?

F35. In reaktiven Formularen, welcher Angular-Formularklassentyp wird auf dem nativen DOM-<form>-Element verwendet, um es zu verdrahten?

F36. Angenommen, das username-FormControl wurde mit einem minLength-Validator konfiguriert, wie können Sie eine Fehleranzeige im folgenden reaktiven Formular-Markup für das username-Feld einrichten?

F37. Wie handhabt der emulierte View-Encapsulation-Modus CSS für eine Komponente?

F38. Mit dem folgenden TestBed-Setup, was kann verwendet werden, um auf das gerenderte DOM für die UserCardComponent zuzugreifen?

F39. Gegeben diese beiden Komponenten, was wird basierend auf der Markup-Verwendung in das DOM gerendert?

F40. Gegeben die app-title-card-Komponente im folgenden Code, welches DOM wird die app-user-card-Komponente rendern?

F41. Wählen Sie den passenden Code für die benutzerdefinierte Provider-Registrierung aus, nach der der @Inject()-Dekorator sucht:

F42. Welche Wahl beschreibt am besten die folgende Verwendung der HttpClient.get-Methode in der getsettings-Klassenmethode?

F43. Wenn ein Service eine gewisse Einrichtung benötigt, um seinen Standardzustand durch eine Methode zu initialisieren, wie können Sie sicherstellen, dass diese Methode aufgerufen wird, bevor der Service irgendwo injiziert wird?

F44. Was beschreibt diese Verwendung des TestBed am besten?

F45. Was ist der Hauptunterschied zwischen einer Komponente und einer Direktive?

F46. Was könnten Sie zu dieser Direktivenklasse hinzufügen, um die Truncate-Länge während der Direktiven-Verwendung im Markup festzulegen?

F47. Wie können Sie Query-Parameter an diese HttpClient.get-Anfrage übergeben?

F48. Angenommen, der DataService wurde in den Providern für die Anwendung registriert, welche Antwort beschreibt am besten, was basierend auf dem Konstruktor dieser Komponente passiert?

F49. Vervollständigen Sie dieses Markup mit der ngIf-Direktive, um einen else-Fall zu implementieren, der den Text "Benutzer ist nicht aktiv" anzeigt:

F50. Was ist die korrekte Syntax für eine Route-Definition zum Lazy Loading eines Feature-Moduls?

F51. Beschreiben Sie, wie die Validierung in diesem reaktiven Formular-Beispiel eingerichtet und konfiguriert ist:

F52. Was macht der Injectable-Dekorator auf dieser Service-Klasse?

F53. Beschreiben Sie die Verwendung dieses Codes

F54. Für das folgende Template-getriebene Formular-Beispiel, welches Argument kann an die submit-Methode im click-Event übergeben werden, um die Daten für das Formular zu übermitteln?

F55. Was ist der Zweck der prelodingStrategy-Eigenschaftskonfiguration in diesem Router-Code?

F56. Was ist eine alternative Möglichkeit, dieses Markup zu schreiben, um den Wert des Klassenfelds userName an die title-Eigenschaft des h1-Elements zu binden?

F57. Was macht die async-Pipe in diesem Beispiel?

F58. Wie würden Sie diese Direktive im Markup basierend auf ihrem Selektor-Wert verwenden?

F59. Welcher Lifecycle-Hook kann auf einer Komponente verwendet werden, um alle Änderungen an @Input-Werten auf dieser Komponente zu überwachen?

F60. Was wäre ein Beispiel für die Template-Syntax-Verwendung dieser benutzerdefinierten Pipe?

F61. Welchen Angular CLI-Befehl würden Sie ausführen, um eine UsersComponent zu generieren und sie zum SharedModule hinzuzufügen (in der Datei shared.module.ts in Ihrer Anwendung)?

F62. Wie können Sie dieses Markup umschreiben, sodass der div-Container im finalen DOM-Rendering nicht benötigt wird?

F63. Wie können Sie die Template-Syntax verwenden, um ein Komponenten-Klassenfeld namens tabWidth an eine Inline-Style-CSS-Eigenschaft width auf diesem Element zu binden?

F64. Welche Angular-Utilities, falls vorhanden, sind erforderlich, um einen Service ohne Konstruktor-Abhängigkeiten per Unit-Test zu testen?

F65. Was ist der Unterschied zwischen den CanActivate- und den CanLoad-Route-Guards?

F66. Wofür wird die outlet-Eigenschaft in diesem Router-Definitionsobjekt verwendet?

F67. In dieser Template-Syntax führt die ngFor-Strukturdirektive jedes Mal, wenn die items-Eigenschaft geändert wird (hinzugefügt, entfernt usw.), ihre Logik für alle DOM-Elemente in der Schleife erneut aus. Welche Syntax kann verwendet werden, um dies performanter zu machen?

F68. Was macht dieser Angular CLI-Befehl?

F69. Service-Klassen können als Provider über welche Dekoratoren registriert werden?

F70. Wofür wird der Input-Dekorator in dieser Komponentenklasse verwendet?

F71. Welcher Route-Guard kann verwendet werden, um die Navigation zu einer Route zu vermitteln?

F72. Wie können Sie den Injector konfigurieren, um ein vorhandenes Objekt für ein Token zu verwenden, anstatt eine Klasseninstanz zu instanziieren?

F73. Basierend auf dieser Route-Definition, was kann in den UserDetailComponent-Konstruktor injiziert werden, um den id-Route-Parameter zu erhalten?

F3. Was ist der Unterschied zwischen `paramMap` und `queryParamMap` in der `ActivatedRoute`-Klasse?

F12. Welche Direktive wird verwendet, um ein `<a>`-Tag mit Routing zu verknüpfen?

F26. Wie ändert die eingebaute strukturelle `ngIf`-Direktive das gerenderte DOM basierend auf dieser Template-Syntax?

F31. Was ist der Zweck des `fixture.detectChanges()`-Aufrufs in diesem Unit-Test?

F32. Wie wird das URL-Segment aussehen, basierend auf dem folgenden Aufruf der `Router.navigate`-Methode, wenn goToUser mit dem Wert 15 übergeben wird?

F35. In reaktiven Formularen, welcher Angular-Formularklassentyp wird auf dem nativen DOM-`<form>`-Element verwendet, um es zu verdrahten?

F47. Wie können Sie Query-Parameter an diese `HttpClient.get`-Anfrage übergeben?

F48. Angenommen, der `DataService` wurde in den Providern für die Anwendung registriert, welche Antwort beschreibt am besten, was basierend auf dem Konstruktor dieser Komponente passiert?

F49. Vervollständigen Sie dieses Markup mit der `ngIf`-Direktive, um einen else-Fall zu implementieren, der den Text "Benutzer ist nicht aktiv" anzeigt:

F55. Was ist der Zweck der `prelodingStrategy`-Eigenschaftskonfiguration in diesem Router-Code?

F56. Was ist eine alternative Möglichkeit, dieses Markup zu schreiben, um den Wert des Klassenfelds `userName` an die title-Eigenschaft des h1-Elements zu binden?

F57. Was macht die `async`-Pipe in diesem Beispiel?