web-dev-qa-db-fra.com

en tant que mot clé dans 4 angulaire?

J'apprends actuellement à propos de Angular 4 a introduit un nouveau mot-clé: as.

Mot clé AS - Un ajout récent à la syntaxe du modèle est le as keyword qui est utilisé pour simplifier la syntaxe let.

Je viens d'implémenter ce code ci-dessous.

<div *ngIf="users | async as usersModel">
    <h2>{{ usersModel.name }}</h2> <small>{{ usersModel.age }}</small>
</div>

Je ne peux pas obtenir beaucoup de détails de nulle part pour cette question ci-dessous.

Des questions:

  • Quelle est la différence entre of users object et userModel object *.
  • Quelle est l'utilisation principale du mot clé as?
  • quelle est la différence entre as et let dans le modèle?
angularlet
4
Ramesh Rajendran

Vous avez préparé le meilleur exemple d'utilisation de "en tant que" mot clé.

Si vous ne l'utilisiez pas, votre code serait moins lisible et ressemblerait à ça: 

<div *ngIf="users | async as usersModel">
    <h2>{{ (users | async)?.name }}</h2> <small>{{ (users | async).age }}</small>
</div>

Dans cet exemple, les utilisateurs sont Observable object. Merci à en tant que kayword, vous pouvez affecter à userModel result of async pipe sur un objet Observable. F.e.

si utilisateurs correspond à users: Observable<User>;, alors usersModel est le résultat d'un canal asynchrone sur la variable users. Il ressemble donc à l'objet usersModel: User.

@EDIT pour une question à propos de as et let

Je ne peux pas vous dire quelle est la différence entre as et let, parce que ce sont deux choses différentes. let est un type de variable javascript, qui: 

let vous permet de déclarer des variables dont la portée est limitée au bloc

as est un mot clé Angular, auquel vous pouvez affecter le résultat de la méthode/pipe à une autre variable. 

Ceci est votre premier message donc je rappelle: Angular n'est pas un langage de programmation, mais un framework JavaScript. La plupart des choses dans Angular sont liées à JS ou TS pur. 

Declaration of for loop in Angular est une copie de la déclaration for loop by array from ECMAScript6, f.e.

for loop (ECMAScript6) 

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}

pour la boucle dans le modèle de composant 

<div *ngFor="let user of users">

Keyword as est un raccourci de l'assigment vers le résultat variable de la méthode, par exemple pour un tuyau

some.pipe.ts 

@Pipe({
    name: 'somePipe'
})
export class SomePipe {
    transform(value: number): number {
        return number * 2;
    }
}

utiliser <div *ngIf="someValue | somePipe as otherValue"> c'est comme:

let otherValue = SomePipe.transform(someValue);

Vous l'avez?

p.s: Le dernier paragraphe de ma réponse est bien sûr un raccourci mental. Si vous voulez savoir comment les directives ngFor et ngIs fonctionnent "à l'intérieur", je vous recommande de regarder Nir Kaufman - Demystified Angular Directives lecture.

9
Jaroslaw K.

La réponse acceptée manque un point très important: async abonnez-vous à votre observable pour obtenir les valeurs résolues. 

Imaginez ce scénario:

composant: 

user:Observable<IUser> = httpClient.get(url);

modèle: 

<div>
    <h2>{{ (users|async).name }}</h2> <small>{{ (users|async).age }}</small>
</div>

Dans le cas ci-dessus, puisque vous utilisez async deux fois, httpClient fait une demande get deux fois .

Donc, pour répondre à votre question:

Q. Quelle est l'utilisation principale du mot clé as?

UNE. as mot-clé donne une bonne apparence à votre code, mais plus important encore il garantit que vous n'utilisez async qu'une seule fois pour une donnée observable, comme je l'ai expliqué ci-dessus.

Q. Quelle est la différence entre as et let dans le modèle?

UNE. let est un mot clé Javascript. Le mot clé as est uniquement reconnu par le compilateur de modèles angulaires. Les deux font le même travail de déclaration et d'initialisation d'une variable. À certains endroits, comme dans *ngFor, les deux sont remplaçables. Mais dans le cas de *ngIf, il attend une variable booléenne dans expression et let x = true ne renvoie pas de booléen, vous ne pouvez donc utiliser que as. 

Q. Quelle est la difference entre of users object et userModel object

UNE. Ceci est déjà répondu. users object est un Observable et userModel est la valeur résolue de usersObservable.

1
dasfdsa