Question

我有一个组件，该组件熄灭并发出http请求以获取一些数据。响应中可能包含我希望使用单独的错误组件/服务/视图在应用程序中显示的请求中的错误。

我的组件存放在app.component.html视图中，例如：

<div>
    <app-error *ngIf="// check if endpoint returned errors, if yes, show"></app-error>
    <app-endpoint></app-endpoint>
</div>

我不确定如何从端点组件（错误将进入我的应用程序）中获取数据到错误组件并查看。

例如，在逻辑上，这是我在EndpointComponent尝试获取数据时想要发生的事情：

endpoint.component.ts

export class EndpointComponent 
{
    constructor(private errorService: ErrorService){ }

    getData(){
        this.endpointService.get().subscribe(
            response => checkError(response) // check and push to my error component if it exists)
...

error.service.ts

export class ErrorService 
{
    public pushErrors(error: string) {

        // In here would be the code to push this error
        // to error.component.ts / error.component.html
    }
...

error.component.html

<div class="alert alert-danger">
    <ul *ngFor="let error of errors">
        <li>{{error}}</li>
    </ul>
</div>

我不确定如何用端点组件内发送回的错误填充错误视图。由于只有在其他组件响应中存在错误时，才会填充此视图，所以我不确定如何告诉我们的应用程序用错误数据填充元素。

Answer 1

我认为您想要的是在错误组件中订阅错误服务error。

我更愿意使用BehaviorSubject来做到这一点。

例如，在错误服务中，将错误定义为behaviourSubject并在ErrorComponent中进行订阅。推送新的错误后，您将在组件中得到错误。

private errorObj = null;
    public errorList: BehaviorSubject<any> = new BehaviorSubject<any>(this.errorObj);

    pushError(value: any) {
        this.errorList.next(value);
    }`

该组件中的当前订阅errorBanner。例如：this.errorService.errorBanner.subscribe( err => {this.showError = true;})

现在在错误组件HTML中。使用showError来显示从errorService收到的错误。

请注意，在这种情况下，ErrorComponent将始终显示应用程序中显示的最新错误。

Answer 2

另一个答案中的可观察模式可能是最好且更具角度的主题方式。

但是最好在服务和组件之间共享一个错误对象（服务在这里像全局包装器一样工作，但是角度小组也允许这样做）。

error.service.ts

export class ErrorService 
{
    public errorList;
    public pushErrors(errors: string[]) {

        //I refactored this for plural 
        this.errorList.push(...errors);
    }
    public clearErrors(){
       this.errorList.splice(0,this.errorList.length) // we remove like this so that there is no reassignment
    }

error.component.ts

public error;
constructor(private errorService: ErrorService){
    this.errors = errorService.errorList
}

每当某个组件将某些内容推送到ErrorService时，都会向ErrorComponent通知更改，因为它正在监视的变量已更改

使用多个组件时如何处理错误

2 个答案: