如何使用HostBinding定位自定义指令以传递成功或错误消息并显示它？

Question

我正在尝试使用自定义的指令，以便在http请求后显示特定的服务器消息/错误。

例如在响应或错误部分中，我想定位自定义指令并抛出突出显示的消息。该指令应已嵌入在组件中，但不可见。首先，在传递服务器消息并显示它之后，然后应根据成功或失败将其显示为绿色或红色背景。

服务器错误。指令：

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请求的错误。

是否有可能动态地实现这一目标，或者我走错了路/概念？

一直在搜索，很遗憾找不到类似的东西。

Answer 1

如果您想将一条消息传递给您的指令，该消息与来自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相同的场景供您参考。