Beim Angular Learning geht es um Anweisungen und Pipelines

Richtlinie

Direktiven sind von Angular bereitgestellte Möglichkeiten操作DOM . Anweisungen werden in属性指令und结构指令unterteilt.

• Attributanweisung: Ändern Sie das Erscheinungsbild oder Verhalten eines vorhandenen Elements und umschließen Sie es mit [] .

• Strukturanweisungen: Fügen Sie DOM-Knoten hinzu und löschen Sie sie, um das Layout zu ändern. Verwenden Sie * als Anweisungspräfix. [Empfohlene verwandte Tutorials: „Angular-Tutorial“]

1. Integrierte Anweisung

1.1 *ngIf

渲染DOM-Knoten oder移除DOM-Knoten basierend auf Bedingungen.

<div *ngIf="data.length == 0">Keine weiteren Daten</div>

<div *ngIf="data.length > 0; then dataList else noData"></div>
<ng-template #dataList>Kursliste</ng-template>
<ng-template #noData>Keine weiteren Daten</ng-template>

ng-template wird zum Definieren von Vorlagen verwendet. Nachdem Sie ng-template zum Definieren einer Vorlage verwendet haben, können Sie diese mit ng-container und templateOutlet verwenden.

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

1.2 [hidden]

DOM-Knoten显示oder DOM-Knoten隐藏(anzeigen) entsprechend den Bedingungen.

<div [hidden]="data.length == 0">Kursliste</div>
<div [hidden]="data.length > 0">Keine weiteren Daten</div>

1.3 *ngFor

durchläuft Daten, um eine HTML-Strukturschnittstelle zu generieren

Liste {
  ID: Nummer
  Name: Zeichenfolge
  Alter: Zahl
}

Liste: Liste[] = [
  { id: 1, Name: „Zhang San“, Alter: 20 },
  { ID: 2, Name: „李思“, Alter: 30 }
]

<li
    *ngFor="
      let Element der Liste;
      sei i = index;
      sei isEven = gerade;
      sei isOdd = odd;
      let isFirst = first;
      let isLast = last;
    "
  >
  </li>

<li *ngFor="let item of list; trackBy: identifiziere"></li>

identifiziere(index, item){
  return item.id; 
}

2. Anforderungen an benutzerdefinierte Befehle

: Legen Sie die Standardhintergrundfarbe für das Element fest, die Hintergrundfarbe, wenn die Maus hinein bewegt wird, und die Hintergrundfarbe, wenn die Maus heraus bewegt wird.

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

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

// Parametertyp-Schnittstellenoptionen empfangen {
  bgColor?: Zeichenfolge
}

@Directive({
  Selektor: „[appHover]“
})
Die Exportklasse HoverDirective implementiert AfterViewInit {
  //Parameter empfangen @Input("appHover") appHover: Options = {}
  // DOM-Knotenelement, auf dem gearbeitet werden soll: HTMLElement
	// Holen Sie sich den DOM-Knoten, der auf dem Konstruktor ausgeführt werden soll (private elementRef: ElementRef) {
    this.element = this.elementRef.nativeElement
  }
	// Hintergrundfarbe des Elements nach dem ersten Abschluss der Komponentenvorlage festlegen ngAfterViewInit() {
    this.element.style.backgroundColor = this.appHover.bgColor ||.
  }
	// Fügen Sie dem Element ein Mausbewegungsereignis hinzu @HostListener("mouseenter") enter() {
    this.element.style.backgroundColor = "rosa"
  }
	//Maus-Out-Ereignis für Element hinzufügen @HostListener("mouseleave") Leave() {
    this.element.style.backgroundColor = "skyblue"
  }
}

Pipe

Die Rolle der Pipeline besteht darin格式化组件模板数据.

1. Integriertes Pipeline

• -Datumsformat

• , Währungsformat,

• Großbuchstaben, Konvertieren in

• Großbuchstaben, Kleinbuchstaben, Konvertieren in Kleinbuchstaben

• , JSON-Format,

{{ Datum | Datum: „JJJJ-MM-TT“ }}

2. Benutzerdefinierte Pipeline-

Anforderungen: Die angegebene Zeichenfolge darf nicht überschritten werden Angegebene Länge

<!-- Dies ist ein... -->
{{'Dies ist ein Test' |. Zusammenfassung: 3}}

// summary.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Rohr({
   Name: 'Zusammenfassung' 
});
Die Exportklasse SummaryPipe implementiert PipeTransform {
    transform (Wert: Zeichenfolge, Grenze?: Zahl) {
        if (!value) return null;
        let currentLimit = (limit) ? limit : 50;
        Rückgabewert.substr(0, currentLimit) + '...';
    }
}

// app.module.ts
importiere { SummaryPipe } aus './summary.pipe'
@NgModule({
    Erklärungen: [
      ZusammenfassungPipe
    ] 
});