Eine kurze Analyse benutzerdefinierter Struktur-/Attributanweisungen in Angular

Angular-Anweisungen sind in drei Typen unterteilt: Komponentenanweisungen (mit Vorlagenanweisungen), Strukturanweisungen (Änderung der Hostdokumentstruktur) und Attributanweisungen (Änderung des Hostverhaltens). Im Folgenden werden hauptsächlich benutzerdefinierte Strukturanweisungen und benutzerdefinierte Attributanweisungen vorgestellt.

1. Benutzerdefinierte Strukturanweisungen

Auf einem Element kann nur eine Strukturanweisung platziert werden: *Befehlsname, * ist ein syntaktischer Zucker, wie im Folgenden gezeigt Code:

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

Das Folgende ist eine benutzerdefinierte Strukturanweisung. Wenn Superadmin und Admin in die Anweisung eingegeben werden, wird der DOM-Knoten angezeigt, andernfalls wird der Knoten entfernt. [Verwandte Tutorial-Empfehlungen: „Angular-Tutorial“]

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

Effekt:

2. Benutzerdefinierte Attributanweisungen

Mit Attributanweisungen können Sie das Erscheinungsbild oder Verhalten von DOM-Elementen und Angular-Komponenten ändern.

1. ElementRef aus @angular/core importieren. Die nativeElement-Eigenschaft von ElementRef bietet direkten Zugriff auf das Host-DOM-Element.

2. Fügen Sie ElementRef im Konstruktor() der Direktive hinzu, um einen Verweis auf das Host-DOM-Element einzufügen, das das Ziel von appColor ist.

3. Fügen Sie der ColorDirective-Klasse Logik hinzu. Unter verschiedenen Eingabebedingungen wird der Hintergrund jeweils als Rot, Grün und Blau angezeigt Programmiervideo

! !

Das obige ist der detaillierte Inhalt vonEine kurze Analyse benutzerdefinierter Struktur-/Attributanweisungen in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!