Une brève analyse des directives structurelles/attributaires personnalisées dans Angular

Les directives angulaires sont divisées en trois types : composants (avec directives de modèle), directives structurelles (modifiant la structure du document hôte) et directives d'attribut (modifiant le comportement de l'hôte). Ce qui suit présente principalement les directives structurelles personnalisées et les directives d'attribut personnalisées.

1. Directives structurelles personnalisées

Une seule directive structurelle peut être placée sur un élément. La forme écrite d'une directive structurelle est *nom de la commande, * est un sucre syntaxique, comme indiqué dans ce qui suit. code :

<div *ngIf=""></div>
<!-- 等价于 -->
<ng-template [ngIf]="">
  <div></div>
</ng-template>

Ce qui suit est une instruction structurelle personnalisée. Lorsque le superadmin et l'administrateur sont entrés dans l'instruction, le nœud DOM est affiché, sinon le nœud est supprimé. [Recommandations de didacticiel associées : "Tutoriel angulaire"]

@Directive({
  selector: '[appLogin]'
})
export class LoginDirective implements OnInit{
  @Input('appLogin') user=""
  constructor(private VCR: ViewContainerRef,private TPL: TemplateRef<any>) { 
  //在指令的构造函数中将 TemplateRef 和 ViewContainerRef 注入成私有变量。
  }
  ngOnInit(){
    if(this.user==&#39;superadmin&#39;||this.user=="admin"){
      this.VCR.createEmbeddedView(this.TPL)
    }else{
      this.VCR.clear()
    }
  }
}

<div *appLogin="&#39;superadmin&#39;">超级管理员</div>
<div *appLogin="&#39;admin&#39;">管理员</div>
<div *appLogin="&#39;user&#39;">普通会员</div>

Effet :

2. Directives d'attribut personnalisées

À l'aide des directives d'attribut, vous pouvez modifier l'apparence ou le comportement des éléments DOM et des composants angulaires.

1. Importez ElementRef depuis @angular/core. La propriété nativeElement d'ElementRef fournit un accès direct à l'élément DOM hôte.

2. Ajoutez ElementRef dans le constructeur () de la directive pour injecter une référence à l'élément DOM hôte, qui est la cible de appColor.

3. Ajoutez une logique à la classe ColorDirective. Dans différentes conditions d'entrée, l'arrière-plan sera affiché respectivement en rouge, vert et bleu

@Directive({
  selector: '[appColor]'
})
export class ColorDirective implements OnInit{
  @Input() appColor=""
  constructor(private ele:ElementRef) { 
    
  }
  ngOnInit(){
    if (this.appColor == 'superadmin'){
      this.ele.nativeElement.style.backgroundColor="red"
    } else if (this.appColor == 'admin') {
      this.ele.nativeElement.style.backgroundColor = "green"
    }else{
      this.ele.nativeElement.style.backgroundColor = "blue"
    }
  }
}

<div [appColor]="&#39;superadmin&#39;">超级管理员</div>
<div [appColor]="&#39;admin&#39;">管理员</div>
<div [appColor]="&#39;user&#39;">普通会员</div>**

Effet :

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!