lux‐http‐error v16

LUX-Http-Error

• LUX-Http-Error
  • Overview / API
    • Allgemein
  • Beispiele
    • 1. LuxHttpErrorInterceptors
    • 2. Fehler pushen

Overview / API

Allgemein

Komponente die zur Darstellung von HTTP-Fehlern genutzt werden kann.

Dafür muss der Tag lux-http-error in die eigene View eingebaut werden und der LuxHttpErrorInterceptor im AppModule eingetragen werden. Wahlweise ist es auch möglich, über den LuxHttpErrorInterceptor eigene Fehler zu pushen, welche dann von dem LuxHttpErrorComponent dargestellt werden.

LuxHttpErrorComponent benutzt die lux-message-box zur Darstellung der Meldungen.

Name	Beschreibung
import	LuxErrorModule
selector	lux-http-error

Beispiele

1. LuxHttpErrorInterceptors

Ts

constructor() {
    // eigentlich fängt der Interceptor selbstständig 400er Fehler von Backendcalls ab, aber für das Beispiel tun wir das manuell.
    LuxHttpErrorInterceptor.dataStream.next([
      ['Der Nachname darf nicht leer sein.'],
      ['Die ID existiert nicht.'],
      ['Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam' +
      ' nonumy eirmod tempor inviduntutlaboreetdolore magna aliquyam erat, ' +
      'sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.']
    ]);
  }

Html

<lux-http-error></lux-http-error>

2. Fehler pushen

Ts

onShowError() {
    // z.B. als String-Array
    LuxHttpErrorInterceptor.dataStream.next(['Fehler 1', 'Fehler 2']);
    // z.B. als Object mit .message-Property
    LuxHttpErrorInterceptor.dataStream.next([{
        message: 'Fehler 1'
    }, {
        message: 'Fehler 2'
    }]);
    // z.B. als Object mit .toString()-Funktion
    LuxHttpErrorInterceptor.dataStream.next([{
        toString: () => 'Fehler 1'
    }, {
        toString: () => 'Fehler 2'
    }]);
}

Html

<lux-http-error></lux-http-error>
<lux-button
  luxLabel="Fehler anzeigen"
  [luxStroked]="true"
  (luxClicked)="onShowError()"
></lux-button>