Question

在Angular2中，我在开发期间有templateUrl = 'templates/app.component.html'之类的东西。但在部署中，我需要网址类似于templateUrl = '/static/angular_templates/app.component.html'。它必须改变每个地方的网址。是否有一种简单的方法来设置基本URL并执行类似

的操作

templateUrl = BASE_TEMPLATE_PATH+ '/app.component.html'

所以我只需要在从开发切换到生产时更新BASE_TEMPLATE_PATH？谢谢！

Answer 1

使用TypeScript，您可以使用静态变量，例如：

export class AppTemplateConstants {

    public static get BASE_TEMPLATE_PATH(): string { return 'YOUR_PATH_HERE'; }

}

要导入此内容：

import { AppTemplateConstants } from '../shared/constants/AppTemplateConstants';

要使用它：

templateUrl: AppTemplateConstants.BASE_TEMPLATE_PATH + 'app/path/component.html'

Answer 2

使用自2.0.0-alpha.36以来可用的templateUrl，您无需更改代码库中的UrlResolver即可达到预期效果。

import {UrlResolver} from '@angular/compiler';
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

let MyApp: any;

@NgModule({
  imports: [BrowserModule],
  providers: [{provide: UrlResolver, useValue: new UrlResolver("http://localhost/app")}],
  bootstrap: [MyApp]
})
class AppModule {
}

export function main() {
  platformBrowserDynamic().bootstrapModule(AppModule);
}

这将使用您指定的基本网址的自定义UrlResolver实例来引导您的应用程序。您甚至可以通过扩展UrlResolver类来更好地控制解析路径：

class MyUrlResolver extends UrlResolver {
  resolve(baseUrl: string, url: string): string {
    // Serve CSS files from a special CDN.
    if (url.substr(-4) === '.css') {
      return super.resolve('http://cdn.myapp.com/css/', url);
    }
    return super.resolve(baseUrl, url);
  }
}

@NgModule({
  imports: [BrowserModule],
  providers: [{provide: UrlResolver, useClass: MyUrlResolver}],
  bootstrap: [MyApp]
})
...

（source）

注意：为了实现这一点，您很可能需要在组件定义中提供moduleId: module.id,来使用component-relative paths，例如：

@Component({
    moduleId: module.id,  // use component-relative paths
    selector: 'dialogs',
    templateUrl: './dialogs.html',
})

Answer 3

我使用DependencyInjection来传递一个EnviromentSettings对象，在那里存储环境变量，例如BASE_TEMPLATE_PATH。

在我看来，这种简单而好的机制。

我希望它有所帮助

Answer 4

您应该使用webpack在构建环境中定义一个常量，例如，您可以使用webpack.DefinePlugin：Passing environment-dependent variables in webpack

Answer 5

你可以使用一个通用的类/服务，你可以在其中存储所有的全局变量，并在引导时注入该类，这样一来，该类现在可供整个应用程序中的所有其他类/组件使用，现在你也可以使用只需在一个地方更改而不是在所有组件中进行更改就可以轻松更改变量值，这是相同的示例 -

import {Component, Injecable} from 'angular2/core';

@Injecable()
export class GlobalService {
public BASE_TEMPLATE_PATH: string;

    constructor() {
        this.BASE_TEMPLATE_PATH = "Your Path Goes Here";
    }
}

并在bootstrap中注册此服务类，如下所示 -

bootstrap(AppComponent, [
  HTTP_PROVIDERS,GlobalService , XYZ...
]);

现在这个GlobalService类可用于所有其他类，

现在也无需在每次使用时在提供程序列表中注册此类，因为angular本身会将其初始化为所有组件，现在在这样的任何类中使用这些全局变量/函数 -

import {GlobalService} from './GlobalService';
...// stuff here
templateUrl: GlobalService.BASE_TEMPLATE_PATH + 'app/path/component.html'

Angular2如何设置templateUrl基本路径

5 个答案: