Ein Artikel über Pipelines (PIPE) in Angular

Was ist PIPE? Dieser Artikel stellt Ihnen die Pipeline (PIPE) in Angular vor und spricht über die Methoden integrierter Pipelines und benutzerdefinierter Pipelines. Ich hoffe, dass er Ihnen hilfreich sein wird!

Was ist Pipeline (PIPE)?

---

PIPE, übersetzt als Pipeline. Angular Pipes sind eine Möglichkeit, Anzeigewerttransformationen zu schreiben, die in HTML-Komponenten deklariert werden können. Angular-Pipelines wurden früher in AngularJS als Filter bezeichnet und werden seit Angular 2 als Pipes bezeichnet. Pipes nehmen Daten als Eingabe und wandeln sie in die gewünschte Ausgabe um. [Verwandte Tutorial-Empfehlungen: Angular-Tutorial, Programmierlehre]

Einfach ausgedrückt können Angular Pipes uns dabei helfen, unsere Eingaben, einschließlich Zeichenfolgen, Ganzzahlen, Datumsangaben usw., entsprechend unserem Bedarf in spezifische Daten umzuwandeln und anzuzeigen im Browser. Durch Interpolationsausdrücke können wir eine Pipeline definieren und in bestimmten Situationen verwenden. Angular stellt uns viele verschiedene Arten von Pipelines zur Verfügung. Natürlich können Sie Pipelines sogar anpassen.

Um ein relativ einfaches Beispiel zu nennen: Es gibt verschiedene Datumsformate. Sie können über Pipelines zwischen verschiedenen Formaten konvertieren, z. B. die Umwandlung von Sekunden in Stunden, Minuten und Sekunden.

Eingebaute Rohre

---

Wie oben erwähnt, stellt Angular viele verschiedene Arten von eingebauten Rohren zur Verfügung. Was die eingebauten Rohre betrifft und wie man sie macht Verwenden Sie sie unten. Demonstrieren Sie es durch Code.

Zeitpipeline Datumdate

我们新建一个 Angular 项目，并且在页面中添加一个 new Date()：

<div>{{data}}</div>
...
export class AppComponent {
  title = &#39;my-app&#39;;
  data = new Date()
}

页面就会显示当前的时间：

那么我们接下去就可以使用内置的管道来进行一个时间格式的转化，管道的语法需要在变量后面添加 | 符号，并且声明管道

<div>{{data | date:&#39;yyyy-MM-dd&#39;}}</div>

这里我们用到了 date

Wir erstellen ein neues Angular-Projekt und fügen der Seite ein neues Datum() hinzu:

<div>{{&#39;ASDasd&#39; | uppercase }}</div>

Die Seite zeigt das aktuelle an Zeit:

Dann können wir die integrierte Pipeline verwenden, um ein Zeitformat zu konvertieren. Die Syntax der Pipeline muss das Symbol | nach der Variablen hinzufügen und die Pipeline deklarieren.

ng g p pipes/pipe-name

Hier verwenden wir Datum Diese Pipeline. Einzelheiten zu den spezifischen Parametern der Pipeline finden Sie in der offiziellen Dokumentation, in der alle Zeitformate vorgestellt werden, die Sie zur Konvertierung bereitstellen können.

Angular - DatePipehttps://angular.cn/api/common/DatePipe#description

Nachdem wir die Pipeline eingerichtet haben, hat sich die Zeit im Browser geändert

Andere Pipes

Angular bietet auch andere Pipes, wie zum Beispiel die Pipe zum Ändern des Währungsformats (Währung):

Angular - CurrencyPipe

https://angular.cn/api/common/CurrencyPipe

Gibt es auch eine Pipe, die Zeichenfolgen in Großbuchstaben umwandelt:

  transform(value: unknown, ...args: unknown[]): unknown {
    return 'tests';
  }
  ...
  <div>{{&#39;ASDasd&#39; | tests }}</div>

---

Angular - UpperCasePipe

https://angular.cn/api/common/UpperCasePipe

benutzerdefinierte Pipe

Wir haben mehrere eingeführt Integrierte Pipelines oben: Wenn die integrierten Pipelines unsere Entwicklungsanforderungen nicht erfüllen können, stellt Angular uns auch benutzerdefinierte Pipelines zur Verfügung. Sie können selbst eine Pipeline definieren und festlegen, wie die Eingabe konvertiert wird.

Wir können schnell eine Pipeline über die von Angular bereitgestellte Befehlszeile generieren:

  transform(value: string, ...args: number[]): string {
    let defaultLength = 10;
    if((args[0] || defaultLength )< value.length){
      return value.substr(0,args[0] || defaultLength)+&#39;...&#39;
    }else{
      return value
    }
  }
  ...
  <div>{{&#39;sssssssssssssssssssssssssssssss&#39; | tests: 30 }}</div>

Hier habe ich eine Pipeline mit dem Namen test erstellt

Nachdem Sie den obigen Befehl ausgeführt haben, wird er unter src erstellt. Erstellen Sie einen Pipes-Ordner für Sie , in dem Ihre benutzerdefinierten Pipes gespeichert sind

🎜🎜🎜🎜 Anschließend führt Angular diese Pipes automatisch für Sie in die App ein, sodass Sie benutzerdefinierte Pipes überall auf der Welt verwenden können. 🎜🎜🎜🎜🎜Dann sehen Sie die Pipe unter dem Pipes-Ordner. Eine Pipe ist im Wesentlichen eine Klasse. Hier wird ein Dekorator verwendet, um ihr einen Namen zu geben. 🎜

在这个类里面我们需要去实现 PipeTransfrom 这个接口，也就是需要有 transform 这个方法，在这个方法中，第一个参数就是要放入管道的输入，第二个数据是我们向管道传递的参数，管道中把它放入了一个数组里面。

这个 transform 方法返回什么，我们的页面拿到的就是什么数据，我们先来做一个测试

  transform(value: unknown, ...args: unknown[]): unknown {
    return 'tests';
  }
  ...
  <div>{{&#39;ASDasd&#39; | tests }}</div>

返回一个固定的字符串，并且在页面中去使用它

可以看到返回的结果变成了 tests 字符串，这样我们就可以确定这个方法的返回值就是最终的输出。

接下来我们实现一个简单的字符串超出截取的管道：

  transform(value: string, ...args: number[]): string {
    let defaultLength = 10;
    if((args[0] || defaultLength )< value.length){
      return value.substr(0,args[0] || defaultLength)+&#39;...&#39;
    }else{
      return value
    }
  }
  ...
  <div>{{&#39;sssssssssssssssssssssssssssssss&#39; | tests: 30 }}</div>

这样就能够对字符串进行一个截取并且在尾部添加 ...

总结

---

本文我们学习了 Angular 中管道的使用，简单的来说管道就是一个方法，可以将你的输入转化为特定的你需要的输出格式，Angular提供给了我们许多的内置管道，当内置管道不满足你的要求的时候，你还可以通过自定义管道来更加灵活的自定义输出格式

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonEin Artikel über Pipelines (PIPE) in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!