Как настроить пользовательскую директиву с помощью HostBinding, чтобы передать сообщение об ошибке или об ошибке и отобразить его? - PullRequest
Новая
       14

Как настроить пользовательскую директиву с помощью HostBinding, чтобы передать сообщение об ошибке или об ошибке и отобразить его?

0 голосов
/ 27 ноября 2018

Я пытаюсь использовать пользовательскую директиву , чтобы показать конкретное сообщение / ошибки сервера после http-запроса.

, например, в ответ или ошибка часть, я хотел бы нацелить пользовательскую директиву и выдать выделенное сообщение.Директива должна быть уже встроена в компонент , но не видна.Сначала, после передачи и отображения сообщения сервера, оно должно отображаться зеленым или красным цветом фона, в зависимости от успеха или неудачи.

server-error.directive : 

import { Directive, ElementRef, OnInit, Renderer2, HostListener, HostBinding } from '@angular/core';


@Directive({
    selector: '[appServerError]'
})

export class ServerErrorDirective implements OnInit {

    constructor( private _elementRef: ElementRef, private _renderer: Renderer2 ) {}

    ngOnInit() {}

    @HostBinding( 'style.backgroundColor' ) backgroundColor: String = 'red';

}

delete-member.component.ts (это MatDialog): 

removeUser() {
    this._crudService.deleteUser( this.selectedUser ).subscribe(res => {
        console.log( `res: ${JSON.stringify(res)}` );
    }, err => {
        console.log( `error: ${err.message}` );
    }) ;
}

edit-member.component (вызывает и открываетMatDialog): 

<mat-content>   
.... 
<div appServerError>Success or Error message should be shown here</div>
....
</mat-content>

Я не хочу использовать #xxxx и elementRef.nativeElement для манипулирования DOM.Идея состоит в том, чтобы использовать пользовательскую директиву в качестве выделенной оболочки для всех ответов сервера или ошибок для различных запросов Http.

Есть ли возможность динамически достичь этого или я иду по неверному пути / концепции?

Искал, к сожалению не нашел ничего похожего.

1 Ответ

0 голосов
/ 27 ноября 2018

Если вы хотите передать сообщение своей директиве в соответствии с любым сообщением из вашего http ответа / статуса.Это можно сделать с помощью @ Input и @ HostBinding

1.) Отредактируйте свой ServerErrorDirective 

@Directive({
    selector: '[appServerError]'
})
export class ServerErrorDirective implements OnInit {

    @Input() appServerError: string;       // Same name as your directive attribute selector

    @HostBinding() 
    get innerText() {                      // This is equivalent to javascript's innerText - by supplying a value on the attached/selected element.
       return this.appServerError;         // Return the appServerError message from @Input() and set the innerText with it.
    }

    // This will help you check if the given appServerError message has a keyword 'Success/success' on its sentence, it will set a background color 'green' otherwise 'red' 
    @HostBinding('style.backgroundColor') 
    get backgroundColor () {
       return this.appServerError.toLocaleLowerCase().includes('success') ? 'green' : 'red';
    }

}

2.) В своем шаблоне EditMemberComponent вы можете использовать его следующим образом: 

<mat-content>   
.... 
<div [appServerError]="'Error message here'"></div>     // OR [appServerError]="errorMessage" if errorMessage is set from your component
.... 
</mat-content>

Тогда он будет эквивалентен : <div>Error message here</div>

Создал для вашей справки тот же сценарий StackBlitz demo .

Result

...