Question

我想为错误处理程序创建一种拦截器。这就是我创建文件的原因：

ErrorService：

import { Injectable } from '@angular/core';

    @Injectable()
    export class ErrorService {
       name : any;

        constructor() {
        }

        setName(message:string){
            this.name = message;
        }

        getName(){
            return this.name;
        }

        error(detail: string, summary?: string): void {
            this.name = detail;
        }
    }

AppErrorHandler：

import { ErrorService } from './error-service';
import { ErrorHandler, Inject  } from '@angular/core';


export class AppErrorHandler implements ErrorHandler {

    constructor(@Inject(ErrorService) private errorService: ErrorService){

    }

    handleError(error : any){
        this.errorService.setName(error.status);
        console.log('getter', this.errorService.getName());
        console.log('test error ', error);        
    }    
}

到那时，一切都很顺利。当我在handleError中打印错误时，它会正确打印。

但是当我想将ErrorService对象传递给ErrorComponent时，Angulas突然看不到它。

ErrorComponent：

import { ErrorService } from './../common/error-service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'error',
  templateUrl: './error.component.html',
  styleUrls: ['./error.component.css']
})
export class ErrorComponent implements OnInit {

  constructor(private errorService: ErrorService) {
    console.log('from ErrorComponent, ', this.errorService);
  }

  message = this.errorService.getName();


  ngOnInit() {
  }

}

和ErrorComponent.html

<div class="alert alert-danger">
  Error!!! {{message}}
</div>

我当然在app.module中添加了一些导入：

import { ErrorComponent } from './error/error.component';

@NgModule({
  declarations: [
...
    ErrorComponent
  ],
  imports: [
    BrowserModule, 
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [
    PostService,
    ErrorService,
    {provide: ErrorHandler, useClass: AppErrorHandler}

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题在于AppErrorHandler我将错误传递给ErrorService，而我希望在ErrorComponent中显示错误但ErrorComponent不会查看传递的数据

更新我按照下面的解决方案得到一个错误。我的errorComponent看起来像是：

import { ErrorService } from './../common/error-service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'error',
  templateUrl: './error.component.html',
  styleUrls: ['./error.component.css']
})
export class ErrorComponent implements OnInit {
  errorService: ErrorService;
  message: string;

  constructor(errorService: ErrorService) {
    this.errorService = errorService;
    console.log('------ from error component ', errorService.name, this.errorService);
  }

  ngOnInit() {
  }

}

html文件：

<div class="alert alert-danger">
  Error!!! {{errorService.name}}
</div>

问题是我实际上无法在浏览器中打印name属性。在Chrome控制台中，我有：

所以你可以看到我可以轻松获取整个对象ErrorService但无法获取控制台中undefined的属性名称 - 为什么？因此，我无法正确显示它。

Answer 1

您可能需要使用import { Inject, Injectable, forwardRef } from "@angular/core"; export class AppErrorHandler implements ErrorHandler { constructor(@Inject(forwardRef(() => ErrorService)) private errorService: ErrorService){ } ... }

 <Button    android:layout_width="wrap_content"
            android:onClick="buttonOnClick"
            android:layout_height="wrap_content"/>

Angular看不到注入的服务

1 个答案: