L'apprentissage angulaire parle d'instructions et de pipelines

Directif

Les directives sont des moyens fournis par Angular操作DOM . Les instructions sont divisées en属性指令et结构指令.

• Directive d'attribut : modifiez l'apparence ou le comportement d'un élément existant, enveloppez-le avec [] .

• Instructions structurelles : ajoutez et supprimez des nœuds DOM pour modifier la disposition, utilisez * comme préfixe d'instruction. [Tutoriels associés recommandés : "Tutoriel angulaire"]

1. Instruction intégrée

1.1 *ngIf

渲染les nœuds DOM ou移除les nœuds DOM en fonction des conditions.

<div *ngIf="data.length == 0">Plus de données</div>

<div *ngIf="data.length > 0 ; puis dataList else noData"></div>
<ng-template #dataList>Liste des cours</ng-template>
<ng-template #noData>Plus de données</ng-template>

ng-template est utilisé pour définir des modèles Après avoir utilisé ng-template pour définir un modèle, vous pouvez utiliser ng-container et templateOutlet pour l'utiliser.

<ng-template #loading>
 <button (click)="login()">se connecter</button>
 <button (click)="sigup()">sigup</button>
</ng-template>
<ng-container *ngTemplateOutlet="loading">
</ng-container>

1.2 [hidden]

显示les nœuds DOM ou隐藏les nœuds DOM (affichage) selon les conditions.

<div [hidden]="data.length == 0">Liste des cours</div>
<div [hidden]="data.length > 0">Plus de données</div>

1.3 *ngFor

traverse les données pour générer

une interface de structure HTML List {
  identifiant : numéro
  nom : chaîne
  âge : nombre
}

liste : Liste[] = [
  { identifiant : 1, nom : "Zhang San", âge : 20 },
  { identifiant : 2, nom : "李思", âge : 30 }
]

<li
    *ngPour="
      laisser un élément de liste ;
      soit je = indice ;
      soit isEven = pair ;
      soit isOdd = impair ;
      soit isFirst = premier ;
      soit isLast = dernier ;
    "
  >
  </li>

<li *ngFor="laisser l'élément de la liste; trackBy: identifier"></li>

identifier (index, élément){
  retourner l'article.id ; 
}

2. Exigences relatives aux commandes personnalisées

 : définissez la couleur d'arrière-plan par défaut pour l'élément, la couleur d'arrière-plan lorsque la souris entre et la couleur d'arrière-plan lorsque la souris sort.

<div [appHover]="{ bgColor: 'skyblue' }">Bonjour Angular</div>

import { AfterViewInit, Directive, ElementRef, HostListener, Input } depuis "@angular/core"

// Options d'interface de type de paramètre de réception {
  bgColor? : chaîne
}

@Directif({
  sélecteur : "[appHover]"
})
la classe d'exportation HoverDirective implémente AfterViewInit {
  //Recevoir les paramètres @Input("appHover") appHover : Options = {}
  // Élément de nœud DOM sur lequel opérer : HTMLElement
	// Récupère le nœud DOM à opérer sur le constructeur (private elementRef : ElementRef) {
    this.element = this.elementRef.nativeElement
  }
	// Définit la couleur d'arrière-plan de l'élément après l'achèvement initial du modèle de composant ngAfterViewInit() {
    this.element.style.backgroundColor = this.appHover.bgColor || "bleu ciel"
  }
	// Ajout d'un événement de déplacement de souris à l'élément @HostListener("mouseenter") enter() {
    this.element.style.backgroundColor = "rose"
  }
	//Ajouter un événement de sortie de souris pour l'élément @HostListener("mouseleave") Leave() {
    this.element.style.backgroundColor = "skyblue"
  }
}

Tuyau

Le rôle du pipeline est格式化组件模板数据.

• 1.

• Format

• de

• date

• du

pipeline intégré

{{ date | date : "aaaa-MM-jj" }}

2. Exigences du pipeline personnalisé

 : la chaîne spécifiée ne peut pas dépasser Longueur spécifiée

<!-- Ceci est un... -->
{{'Ceci est un test' | résumé : 3}}

// résumé.pipe.ts
importer { Pipe, PipeTransform } depuis '@angular/core' ;

@Tuyau({
   nom : 'résumé' 
});
classe d'exportation SummaryPipe implémente PipeTransform {
    transformation (valeur : chaîne, limite ? : nombre) {
        si (!value) renvoie null ;
        laissez actualLimit = (limite) ? limite : 50 ;
        return value.substr(0, actualLimit) + '...';
    }
}

// app.module.ts
importer { SummaryPipe } depuis './summary.pipe'
@NgModule({
    déclarations : [
      RésuméTuyau
    ] 
});