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

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（），其常量提供者 为

   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

如果打开 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) {
}

您可以在此处了解有关提供商的更多信息

Answer 2

您可以使用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);
    }

完整的源代码可以在这里和这里找到