Angular2如何設置templateUrl基路徑

在Angular2中，我在開發過程中有類似templateUrl = 'templates/app.component.html'的東西。但在部署中，我需要的URL是templateUrl = '/static/angular_templates/app.component.html'。它咬人必須改變每一個地方的網址。有一種簡單的方法來設置一個基本的URL，並完成類似Angular2如何設置templateUrl基路徑

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

，所以我只能從開發轉向生產時，需要更新BASE_TEMPLATE_PATH？謝謝！

來源

2016-04-22 totoro

隨着打字稿可以使用靜態變量，如：

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'

來源

2016-04-22 15:40:03 AdrienTorris

是不是：'AppTemplateConstants.BASE_TEMPLATE_PATH'，@Adrien？ :-) –

嗯，你是對的...... :)我編輯了我的答案來解決這個錯誤。感謝您的通知。 – AdrienTorris

似乎不工作：錯誤：類型錯誤：未定義無法讀取屬性「BASE_TEMPLATE_PATH」（...）我在出口試過的console.log，我可以看到字符串，而不是在@Component – Stephen

你應該定義一個常數你使用webpack構建環境，例如，您可以使用webpack.DefinePlugin：Passing environment-dependent variables in webpack

來源

2016-04-22 15:43:00 Hitmands

我使用DependencyInjection傳遞一個EnviromentSettings對象，其中存儲了諸如BASE_TEMPLATE_PATH之類的環境變量。

在我看來，這種簡單而好的機制。

我希望它能幫助

來源

2016-04-22 20:11:01 Picci

你可以使用一個通用類/服務，可以在其中存儲你所有的全局變量，並通過做注射該類在引導的時候，這樣的類現已向所有其他類整個應用程序/組件和現在還可以通過在一個地方只是改變，而不是使所有成分的變化很容易地改變你的變量值這裏是相同的例子 -

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(AppComponent, [ 
    HTTP_PROVIDERS,GlobalService , XYZ... 
]);

這GlobalService類是提供給所有其他類，

現在也沒有必要當你每次使用註冊這個類供應商的名單，因爲角度本身初始化這所有組件，現在用這些全局變量/功能中任何一類這樣的 -

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

來源

2016-04-23 05:44:17

可以達到預期的效果，而不使用UrlResolver改變templateUrl在你的代碼庫，可用自2.0.0-alpha.36。

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一個自定義實例具有您指定一個基本URL您的應用程序。你甚至可以更好地控制通過擴展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', 
})

來源

2017-04-08 03:16:55

Angular2如何設置templateUrl基路徑

回答

相關問題