如何使用功能解析器运行 http 请求？

Question

过去，我可以使用基于类的解析器，在构造函数中注入

HttpClient

，但这已被弃用 Source。

我想在功能解析器中发出 HTTP get 请求。如何注入 HTTP 客户端？

这是我的解析器代码：

import { ResolveFn } from '@angular/router';

export const chuckResolver: ResolveFn<boolean> = (route, state) => {
  return this.http.get<any>('https://api.chucknorris.io/jokes/random');
};

Answer 1

利用

inject

中的新

@angular/core

函数功能，它允许您注入所需的任何依赖项，例如服务

服务

interface Hero {
  name: string;
}
@Injectable()
export class HeroService {
  constructor(private http: HttpClient) {}
  getHero(id: string): Observable<any> {
    return this.http.get(...);
  }
}

功能解析器

export const heroResolver: ResolveFn<Hero> =
    (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
      return inject(HeroService).getHero(route.paramMap.get('id')!);
    };

然后从任何需要它的组件访问解析器数据，如下所示：

组件

@Component({template: ''})
export class HeroDetailComponent {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.data.subscribe(
        ({hero}) => {
            // do something with your resolved data ...
        });
  }
}

我建议阅读官方 Angular docs，这个例子是从那里获取的。