如何从azure APIM开发者门户中的angular组件调用服务

Question

我已经从Github下载了azure开发者门户源代码并对其进行了自定义。我已经使用angular框架创建了新的小部件，并尝试访问azure Rest API服务。我在源代码中发现了一个名为mapiclient的通用服务，并试图在我新创建的组件中重用它来调用azure rest api。下面是我正在尝试的代码，

**new-widget-runtime.ts**
import { Component, Input, NgModule, Injector } from "@angular/core";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { createCustomElement } from "@angular/elements";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NewWidgetRequest } from "../../../../contracts/newWidgetRequest";
import { MapiClient } from "../../../../services";
import { NewWidgetService } from "../../../../services/newWidgetService";
@Component({
selector: "new-widget-runtime",
templateUrl:'../new-widget-runtime.html',
providers:[MapiClient]
})
export class NewWidgetRuntime {


constructor(private readonly mapiClient : MapiClient) {   }
ngOnInit() {

}
/**
* Sends api request to Management API.
*/
public async submit(): Promise<void> {
const newWidgetRequest : NewWidgetRequest={
//data
}
const apiId = "SampleAPI";
let url= 'api/${apiId}';
await this.mapiClient.post(url, [MapiClient.getPortalHeader("newWidgetRequest")], newWidgetRequest);
}

}

@NgModule({
declarations: [NewWidgetRuntime],
imports: [CommonModule, BrowserModule, FormsModule, ReactiveFormsModule],
entryComponents: [NewWidgetRuntime],
providers:[MapiClient]
})
export class AngularAppNewWidgetModule {
constructor(private angularInjector: Injector) {
const elementConstructor = createCustomElement(NewWidgetRuntime, { injector: this.angularInjector });
customElements.define("new-Widget-runtime", elementConstructor);
}
}
platformBrowserDynamic()
.bootstrapModule(AngularAppNewWidgetModule)
.catch(error => console.log(error));

从angular组件调用mapiclient服务时出错，因为无法解析mapiclient的所有参数：(？，？，？(。

MapIClient服务在构造函数中需要四个参数

import * as Constants from "./../constants";
import { ISettingsProvider } from "@paperbits/common/configuration";
import { Logger } from "@paperbits/common/logging";
import { Utils } from "../utils";
import { TtlCache } from "./ttlCache";
import { HttpClient, HttpRequest, HttpResponse, HttpMethod, HttpHeader } from "@paperbits/common/http";
import { MapiError } from "../errors/mapiError";
import { IAuthenticator, AccessToken } from "../authentication";
import { KnownHttpHeaders } from "../models/knownHttpHeaders";
export class MapiClient {
private managementApiUrl: string;
private environment: string;
private initializePromise: Promise<void>;
private requestCache: TtlCache = new TtlCache();
constructor(
private readonly httpClient: HttpClient,
private readonly authenticator: IAuthenticator,
private readonly settingsProvider: ISettingsProvider,
private readonly logger: Logger
) { }

如何在角组件中注入构造函数参数在谷歌上搜索并尝试了多种方法，但没有找到任何解决方案。。有人能帮助如何从angular组件调用服务吗。

Answer 1

Angular无法按原样注入paperbits服务，它们的实例存储在一个注入器中，您必须找到

以下是您如何注册将安装角度组件的paperbit模块(请注意我们如何保持paperbit注射器(

export class ProductListOrderedRuntimeModule implements IInjectorModule {
public static paperbitsInjector: IInjector;
public register(paperbitsInjector: IInjector): void {
// Allow accessing paperbits injector from angular module
ProductListOrderedRuntimeModule.paperbitsInjector = paperbitsInjector;
platformBrowserDynamic()
.bootstrapModule(YourAngularWebComponentModule)
.catch(console.error);
}
}

然后你可以在你的角度分量中使用它

export class ProductListOrderedRuntime {
public productService: ProductService = ProductListOrderedRuntimeModule.paperbitsInjector.resolveClass(ProductService);
public usersService: UsersService = ProductListOrderedRuntimeModule.paperbitsInjector.resolveClass(UsersService);
public routeHelper: RouteHelper = ProductListOrderedRuntimeModule.paperbitsInjector.resolveClass(RouteHelper);
public router: Router = ProductListOrderedRuntimeModule.paperbitsInjector.resolve("router");
}