Question

我正在尝试使用角度路由解析器在显示之前加载端点，但我无法找到解决方法如何在我的解析器中传递我的API的url作为参数？由于某些独特的原因，我需要传入一个参数，所以我无法在服务中传递api。

这是我的服务

@Injectable()
export class HnService {  
  constructor(private http: HttpClient) {}

  getTopPosts(endpoint) {
    return this.http.get(endpoint);
  }
}

这是我的解析程序文件

@Injectable()
export class HnResolver implements Resolve<any> {
  constructor(private hnService: HnService) {}

  resolve() {
    return this.hnService.getTopPosts(?);
  }
}

Answer 1

首先，您的路线应该是这样的

 {
    path: 'hn/:id',
    component: HnDetailsComponent,
    resolve: {
      response: HnResolver
    },
}

你的解析器应该喜欢这个

@Injectable()
export class HnResolver implements Resolve<any> {
 constructor(private HnService: hnService) {
}

  resolve(route: ActivatedRouteSnapshot, 
  state: RouterStateSnapshot): Observable<any> {
    return this.hnService.getTopPosts(route.data['id']);
  }
}

<强> 注意：的 表示您的路线类似于http://localhost:4200/hn/4 其中 4是您希望查看详细信息的hn 的ID

在HnDetailsComponent中您可以访问已解决的hn

export class HnDetailsComponent implements OnInit {

constructor(private route: ActivatedRoute) { }

  ngOnInit() {
   const myHnResolved = this.route.snapshot.data.response;
   console.log(myHnResolved)
  }
}

我希望这有助于你解决问题。

Answer 2

如果您只想在解析器中传递数据并访问此数据，则可以在定义路径时使用data属性。

首先，您的路线应该是这样的

 {
    path: 'hn/:id',
    component: HnDetailsComponent,
    resolve: {
      response: HnResolver
    },
    data:{
      apiURL: 'my/api/url'
    }
}

决议中的

@Injectable()
export class HnResolver implements Resolve<any> {
 constructor(private hnService: HnService) {
}

  resolve(route: ActivatedRouteSnapshot, 
state: RouterStateSnapshot): Observable<any> {
    return this.hnService.getTopPosts(route.data['apiURL']);
  }
}

如何使用角度路径解析器从api解析数据

2 个答案: