Question

我使用.NET Core开发了很少的angular应用程序，但是每次Angular应用程序都是单独的，而.NET Core API是单独的。

现在，我正在使用内置的Angular模板开发Angular应用，该模板在同一项目中包含API。

我曾经用完整的URL调用api（通过在服务中将基本URL定义为http://portNumber ：），但是在此内置模板中，这就是我得到的

    export class FetchDataComponent {
  public forecasts: WeatherForecast[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }
}

其内置组件随附有角度模板

此处写为

http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts')

经过一番搜索，我在main.ts中找到了一个方法 getBaseUrl（），其中常量 providers 为

   export function getBaseUrl() {
      return document.getElementsByTagName('base')[0].href;
    }
const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

现在有人可以向我解释如何从这里的Base Url以 @Inject（'BASE_URL'）的形式到达组件中而不在服务中共享它吗？

在angularJS中，我曾经借助 @ url.action

$http({
        url: "@Url.Action("Action", "Controller")",
        params: { StaffCode: $scope.staffid },
        method: "GET",
     })

我们也可以在角度5中这样做吗？以及如何在不创建服务的情况下共享“ BASE_URL”的值？

Answer 1

您可以使用enviroment.ts获得Base_URL值。这是我的样品。

export const environment = {
  production: false,
  serverUrl: 'http://localhost:51316',
  authKey: 'currentUserInfo',
  cookieKey: 'isLogin'
};

在我的服务中，我只是这样做

   login(userCredentials: UserCredentials): Observable<any> {
        const loginUrl =  `${environment.serverUrl}/auth?grant_type=password&username=${userCredentials.account}&password=${userCredentials.password}`;
        return this.http.get(loginUrl);
    }

可以找到完整的源代码here和here

Answer 2

如果打开main.ts文件，则会找到一个函数和一个提供程序，如下所示：

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

请注意提供者如何从useFactory获取价值。然后您会看到使用该提供程序，正在生成主模块：

platformBrowserDynamic(providers).bootstrapModule(AppModule);

现在将提供程序注入到您的组件中

constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
}

您可以了解有关提供者here

的更多信息

具有.Net核心的Angular App中的基本URL

2 个答案: