@Component({
...
template: '<p #bio></p>'
})
export class UserDetailsComponent {
@ViewChild('bio') bio;
}
<p> qui a la variable de référence du modèle bio dans la vue du modèle du composant.<p> doit être rendu en tant qu’enfant de la vue parent qui utilise ce composant.<p> dans le modèle prend en charge la projection de contenu.<p> visible dans le rendu final. Si le #bio a été utilisé dans le modèle et que le @ViewChild n’a pas été utilisé dans la classe, Angular masque automatiquement le <p> qui a #bio dessus.DigitalOcean - viewchild-access-component
Angular.io - Groupes de formulaires réactifs
paramMap et l’ queryParamMap sur l’ ActivatedRoute classe?<h2>Names</h2>
<div *ngFor="let user of users | async"></div>
<h2>Ages</h2>
<div *ngFor="let user of users | async"></div>
<h2>Genders</h2>
<div *ngFor="let user of users | async"></div>
export class OrderService {
constructor(private httpClient: HttpClient) {}
addOrder(order: Order) {
// Missing line
}
}
Angular.io - Envoi de données au serveur
@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 - Métadonnées de composant
<ul>
<li [ngFor]="let productName of productNames"></li>
</ul>
<ul>
<li ngFor="let productName of productNames"></li>
</ul>
<ul>
<li *ngFor="let productName of productNames"></li>
</ul>
<ul>
<? for productName in productNames { ?>
<li></li>
<? } ?>
</ul>
Angular.io- Directives structurelles
Angular.io - Styles de composants
@Component({
selector: 'app-title-card',
template: '',
})
class TitleCardComponent {
title = 'User Data';
}
title[title]Angular.io - Interpolation de chaîne ou Interpolation de texte
Angular.io - Affichage d’une valeur de contrôle de
<a> balise au routage ?@Component({
selector: 'app-shopping-cart',
. . .
})
export class ShoppingCartComponent {
@Output() itemTotalChanged = new EventEmitter();
}
itemTotalChanged champ de classe public.itemTotalChanged champ de classe, comme ceci : <app-shopping-cart [itemTotalChanged]="newTotal"></app-shopping-cart>.itemTotalChanged champ de classe, comme ceci : <app-shopping-cart (itemTotalChanged)="logNewTotal($event)"></app-shopping-cart>.Angular.io - Envoi de données au composant parent
<div *ngIf="isVisible">Active</div>
<div [hidden]="!isVisible">Active</div>
ngIf est un raccourci pour l’autre exemple. Lorsque Angular traite cette directive, il écrit un élément div dans le DOM avec la propriété masquée.ngIf ne restitue pas le div dans le DOM si l’expression est false. Le hidden l’utilisation de la propriété masque le contenu div dans la fenêtre d’affichage du navigateur, mais le div se trouve toujours dans le DOM.ngIf est valide, mais l’utilisation de l’ hidden la propriété est incorrecte et génère une erreur.<form #userForm="ngForm">
<input type="text" ngModel name="firstName" required />
<input type="text" ngModel name="lastName" required />
<button (click)="submit(userForm.value)">Save</button>
</form>
<button (click)="submit(userForm.value)" disable="userForm.invalid">Save</button>
<button (click)="submit(userForm.value)" [disabled]="userForm.invalid">Save</button>
<button (click)="submit(userForm.value)" [ngForm.disabled]="userForm.valid">Save</button>
<button (click)="submit(userForm.value)" *ngIf="userForm.valid">Save</button>
Angular.io - Soumettez le formulaire avec ngSubmit
Angular.io - ng générer des options
@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 - Interpolation de chaîne
Angular.io - Crochets de cycle de vie
<span>Boss: </span>
{ path: 'user/:id', component: UserDetailComponent }{ url: 'user/:id', routedComponent: UserDetailComponent }{ routedPath: 'user/:id', component: UserDetailComponent }{ destination: new UserDetailComponent(), route: 'user/:id' }CodeCraft - Itinéraires paramétrés
@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="">Invalid field data</span>
Angular.io -Afficher et masquer l’erreur de validation
<h1 #headerText>User List</h1>
<h1> élémentPluralsight - Variable de référence de modèle
[{ provide: FormattedLogger, useClass: Logger }][{ provide: FormattedLogger, useExisting: Logger }];
Angular.io - Fournisseurs de dépendances
{
path: 'customers',
component: CustomerListComponent,
data: { accountSection: true }
}
ngIf directive structurelle modifier le DOM rendu en fonction de cette syntaxe de modèle?@Component({
selector: 'app-product',
template: '<div *ngIf="product"></div>',
})
export class ProductComponent {
@Input() product;
}
<div> agit comme un espace réservé. Si le champ de classe de produit est « truthy », le <div> sera remplacé par le seul product.name valeur; sinon, rien ne sera rendu.<div> sera toujours rendu, et si le champ de produit est « véridique », le <div> contiendra le product.name valeur; sinon, il rendra le <div> élément sans valeur.<div> avec la valeur de l’ product.name champ. S’il n’est pas « véridique », le DOM rendu ne contiendra pas le <div> élément.@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent],
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
Angular.io - Le NgModule de base
{
path: ':id',
component: UserComponent,
resolve: {
user: UserResolverService
}
}
@Component({
. . .
template: '<ng-content></ng-content›'
})
export class TabsListComponent {
@ContentChildren(TabComponent) tabs;
}
fixture.detectChanges() appeler ce test unitaire ?TestBed.configureTestingModule({
declarations: [UserCardComponent],
});
let fixture = TestBed.createComponent(UserCardComponent);
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('h1').textContent).toContain(
fixture.componentInstance.title,
);
Router.navigate méthode lorsque goToUser reçoit la valeur 15 ?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;
}
FormArrayFormControlFormGroupall of these answers<form [formGroup]="form"›
<input type="text" formControlName= "username"›
...
</form>
<span *ngIf="username.minLength.invalid"›
Username length is not valid
</span>
<input type="text" formControlName="username" [showMinLength]="true"›
<span *ngIf="form.get('username').getError('minLength') as minLengthError">
Username must be at least characters.
</span>
<input type="text" formControlName="username" #userName="ngModer">
<span *ngIf="userName.errors.minlength"›
Username must be at least characters.
</span>
TestBed.configureTestingModule({
declarations: [UserCardComponent],
});
let fixture = TestBed.createComponent(UserCardComponent);
fixture.componentTemplatefixture.getComponentHtml()fixture.nativeElementfixture.componentInstance.template @Component({
selector: 'app-card',
template: '<h1>Data Card</h1><ng-content></ng-content>'
})
export class CardComponent { }
@Component({
selector: 'app-bio',
template: '<ng-content></ng-content>.
})
export class BioComponent { }
// markup usage:
<app-card><app-bio>Been around for four years.</app-bio></app-card>
<app-card>
<h1>Data Card</hl>
<app-bio>
Been around for four years.
</app-bio>
</app-card>
<h1>Data Card</h1>
<app-bio>
Been around for four years.
</app-bio>
<app-card>
<h1>Data Card</hl>
<ng-content></ng-content>
<app-bio>
Been around for four years.
<ng-content></ng-content>
</app-bio>
</app-card>
<app-card>
<h1>Data Card</hl>
</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>User Data</hl>'
})
// usage of user card component in parent component html
<app-user-card></app-user-card>
<app-user-card>
<app-title-card>
<h1>User Data</h1>
</app-title-card>
<p>Jenny Smith</p>
</app-user-card>
<h1>User Data</h1>
<p>Jenny Smith<p>
<app-user-card>
<app-title-card></app-title-card>
</app-user-card>
<div app-user-card>
<h1 app-title-card>User Data</h1>
<p>Jenny Smith</p>
</div>
constructor(@Inject('Logger') private logger) { }
providers: [Logger];
providers: [{ provide: 'Logger', useClass: Logger }];
@Injectable({
providedln: 'root'
})
providers: [{ provide: 'Logger' }];
Angular.io - L’injection de dépendance en action
export class SettingsService {
constructor(private httpClient: HttpClient) { }
...
getSettings()
{
return this.httpClient.get<Settings>(this.settingsUrl)
.pipe(
retry(3)
);
}}
getSettings exécutera la requête get. L’opérateur de nouvelle tentative est utilisé pour indiquer à l’appel de tuyau de réessayer la requête get trois fois.Httpclient.get appeler.const spy = jasmine.createSpyObj('DataService', ['getUsersFromApi']);
TestBed.configureTestingModule({
providers: [UserService, { provide: DataService, useValue: spy }],
});
const userService = TestBed.get(UserService);
All other tests be ignored, including tests that assert results against one of these providers and a non-defined provider.
Although it will work when multiple providers in this configuration are asserted against in a single test. @Directive({
selector: '[appTruncate]'
})
export class TruncateDirective {
. . .
}
// example of desired usage:
<p [appTruncate]="10">Some very long text here</p>
@Input() appTruncate: number;@Output() appTruncate;constructor(maxLength: number) { }Nothing. The directive selector cannot be used to pass in values to the directive.HttpClient.get demander?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)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);
}
DataService a été enregistré dans les fournisseurs de l’application, quelle réponse décrit le mieux ce qui se passe en fonction du constructeur de ce composant ? @Component({
...
})
export class OrderHistoryComponent {
constructor(private dataService: DataService) {}
...
}
OrderHistoryComponent aura sa propre version d’un DataService et qu’il ne devrait jamais utiliser d’instances existantes. Le DataService devrait être instancié dans la classe en tant que champ privé pour que ce code soit complet et fonctionne.OrderHistoryComponent, l’injecteur fournira une instance d’un DataService au premier argument du constructeur de composants. Le constructeur dataService sera utilisé pour définir un champ d’instance privée portant le même nom sur l’instance.dataService qui peut être utilisé pour lier un existant DataService instance à.Angular.io - Injection de dépendance
ngIf directive pour implémenter un autre cas qui affichera le texte « L’utilisateur n’est pas actif »:<div *ngIf="userIsActive; else inactive">
Currently active!
</div>
<div #inactive>User is not active.</div>
<div *ngIf="inactive">
User is not active.
</div>
<ng-template #else="inactive">
<div>User is not active.</div>
</ng-template>
<ng-template #inactive>
<div>User is not active.</div>
</ng-template>
{
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 - Modules de chargement paresseux
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 pour username est configuré pour exclure trois validateurs des validateurs qu’il est autorisé à utiliser.FormControl pour username est en cours de configuration pour permettre l’utilisation de trois validateurs possibles : required, maxLength, et un personnalisé nommé unique. Pour les activer validators, une directive de validateur devrait être placée sur les champs de formulaire dans le balisage.FormControl pour username est configuré avec trois validateurs : le required et minLength les validateurs provenant d’Angular et une fonction de validateur personnalisée nommée unique qui vérifie la valeur non égale à la chaîne admin.Angular.io - Validation du formulaire
@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()">Save</button>
</form>
RouterModule.forRoot(
...{
preloadingStrategy: PreloadAllModules,
},
);
userName à l h1 propriété de titre d’élément?<h1 [title]="userName">Current user is </h1>
async pipe doing dans cet exemple ?@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 déclaration.ngFor itération pour prendre en charge plusieurs listes d’utilisateurs en même temps.HttpClient.get et déballage de la valeur renvoyée afin qu’elle puisse être itérée dans le ngFor.users à restituer simultanément au DOM.@Directive({
selector: '[appTruncate]'
})
export class TruncateDirective{
. . .
}
html <p data-directive="appTruncate">Some long text </p> html <p appTruncate>Some long text</p> html <p app-truncate>Some long text</p> html <app-truncate>Some long text</app-truncate> Comment détecter quand une valeur @Input() change dans Angular?
@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;
}
}
| [x] {( ‘un long texte’ | tronquer:10 }) |
| [ ] {( ‘un texte long’ | tronquer:10:true }) |
| [ ] {( ‘un long texte’ | tronquer }) |
[revérifiez les réponses]
[revérifiez les réponses]
<div *ngIf="location">
<h1></h1>
<p></p>
</div>
<div *ngIf="location">
<h1></h1>
<p></p>
<ng-template *ngIf="location">
<h1></h1>
<p></p>
</ng-template>
<div *ngIf="location" [display]=" ' hidden' ">
<h1></h1>
<p></p>
</div>
<ng-container *ngIf="location">
<h1></h1>
<p></p>
</ng-container>
[revérifier les réponses]
export interface AppSettings {
title: string;
version: number;
}
[revérifier les réponses]
Tests unitaires angulaires - revérifier les réponses
CanActivate vs Canload CanActivate empêche l’accès sur les itinéraires, CanLoad empêche le chargement paresseux.
{
path: 'document',
component: DocumentComponent,
outlet: 'document-box'
}
Prise angulaire - revérifier la réponse