angular 2 将变量从 injectable 传递到 component

Question

我写了一个 http 拦截器来捕获来自服务器的所有 5xx 错误。这个想法是，在 app.component.html 中，我有组件（错误响应），如果出现 5xx 错误，则必须显示该组件。在拦截器中，我可以检查是否有错误。但是如何将此信息传递给 "bad-response" 组件？

我尝试创建另一个服务，它将被注入到组件中以获取变量值并注入到拦截器中以设置它，但没有成功。

app.component.html

<top-nav></top-nav>

<router-outlet></router-outlet>

<bad-response></bad-response> //need to pass info about 5xx error here

interceptor.ts

@Injectable()
export class InterceptedHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
   super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return super.request(url, options);
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    super.get(url, this.getRequestOptionArgs(options)).subscribe((res: Response) => {
     // here I can get to response status code via res.status
   });
   return super.get(url, this.getRequestOptionArgs(options));
  }

  ...other code
}

不好-response.component.html

<div *ngIf="isBadResponse">
  Sorry, there are connection problems
</div>

不好-response.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'bad-response',
  templateUrl: './bad-response.component.html'
})

export class BadResponseComponent implements OnInit {

  isBadResponse: boolean;

  constructor() {
  }

  ngOnInit() {
  }
}

Answer 1

我建议让您的 BadResponseComponent 从父组件获取一个输入变量，然后从那里开始做您喜欢的事情。

您可以使用 @Input 装饰器来实现。

您的 BadResponseComponent 示例如下所示：

import {Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'bad-response',
  templateUrl: './bad-response.component.html'
})

export class BadResponseComponent implements OnInit {

  @Input() isBadResponse: boolean;

  constructor() {
  }

  ngOnInit() {
  }
}

在这种情况下，您使用 BadResponseComponent 的父组件将提供 isBadResponse 布尔值，之后您可以使用它做任何您喜欢的事情。

COMPONENT INTERACTION - 这是了解更多组件交互的好资源。

Answer 2

发现可以通过另一个连接组件和可注入并使用 static 属性

的服务来完成

angular 2 将变量从 injectable 传递到 component

angular 2 pass variable from injectable to component

dependency-injection

interceptor

angular