Question

我写了一个http拦截器，以便从服务器捕获所有5xx错误。我的想法是在app.component.html中我有组件（坏响应），如果出现5xx错误，必须显示该组件。在拦截器中，我可以检查是否有错误。但是我怎样才能将这些信息传递给＃34; bad-response＆＃34;成分

我试图创建另一个服务，它将被注入组件以获取变量值，并在拦截器中进行设置，但没有运气。

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

我建议让你的@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的父组件将提供{{1}}布尔值，然后您可以随意使用它。

COMPONENT INTERACTION - 这是了解有关组件互动的更多信息的良好来源。

Answer 2

发现它可以通过另一个连接组件和可注射的服务来完成，并使用静态属性

角度2传递变量从注射到组件

2 个答案: