如何在@Component聲明中使用服務或全局函數？

Question

我有一個服務，它具有與我的環境有一定的路由問題幫助，現在我需要應付模板路由問題

理想我想能夠做這樣的事情：

import { PathSvc } from './globals/path.svc'; 
@Component({ 
    templateUrl: this.pathSvc.alias + '/app/my.comp.html' 
}) 
export class MyComp { 
    constructor(private pathSvc: PathSvc) { }   
} 

當然不工作，因爲服務不發在組件聲明中使用，所以我得到一個運行控制檯錯誤：

requests:38 Error: TypeError: Cannot read property 'pathSvc' of undefined(…)

打字稿和模塊化的JS在genaral是一個新的東西給我。也許有更直接的方式將我的函數導入一堆模塊並在任何我想要的地方使用它？

我意識到這是不是最佳做法，我應該使用

<base href="/{alias}" /> 

方法來獲取這些結果，但是不是現在發生的事情。

總而言之，當我嘗試讓我的ASP.Net MVC + Angular 2應用程序更加動態地意識到其宿主環境並處理後端和前端路由衝突時，所有這些都停止了工作。我希望以更正確的方式來實現這一目標，但目前我只需要它的工作，所以我的老闆很高興，並且全球路由腳本似乎是這樣。

Answer 1

如果我正確理解，你想創建一個服務，可以作爲角的DI過程中的幫手。

就像@Günter_Zöchbauer說的，Injectable不能用在Ng2對象（Component，Injectable ...）實例的外部，但在你的情況下，創建一個注射是無關緊要的。 創建角度應用並不意味着所有的文件必須包含的角度對象，你還可以創建基本的類/常數..

例如，如果希望建立一個網址給你的幫手，可以創建一個類，並通過簡單地導入它來在組件聲明中使用它。

//urlbuilder.ts 
const host:string = 'http://foo.bar.com'; 
export class UrlBuilder { 
    static generate(file:string = '') { 
     return host + file; 
    } 
} 

// component.ts 
import {UrlBuilder} from './urlbuilder'; 

@Component({ 
    templateUrl: UrlBuilder.generate('/foo.html') 
}) 
export class FooComponent {} 

你甚至可以導出一個函數而不是類，它也可以工作。 以下代碼顯示與上面相同的代碼，但帶有一個功能和一個es6標籤。

//urlbuilder.ts 
const host:string = 'http://foo.bar.com'; 
export const UrlBuilder = urlBuilderFn; 

//basic tag function that build a template string with potential variables 
function urlBuilderFn(strs, ...raws) { 
    let builtStr = '', length = strs.length; 

    for(let i = 0; i < length; i++) 
     builtStr = strs[i] + (raws[i] !== undefined && raws[i] !== null ? raws[i] : ''); 

    return host + builtStr; 
} 


// component.ts 
import {UrlBuilder as url} from './urlbuilder'; 

@Component({ 
    templateUrl: url`/foo.html` 
}) 
export class FooComponent {} 

但是，如果想使用你的助手與DI太（不管是什麼原因，需要角度DEPS ..）可以使注射劑類的靜態方法。

//urlbuilder.ts 
const host:string = 'http://foo.bar.com'; 

@Injectable() 
export class UrlBuilder { 

    constructor(private http:Http) {} 

    static generate(file:string = '') { 
     return host + file; 
    } 

    doSomething() { 
     return this.http.get(UrlBuilder.generate('/foo/bar')) 
    } 
} 

// component.ts 
import {UrlBuilder} from './urlbuilder'; 

@Component({ 
    templateUrl: UrlBuilder.generate('/foo.html') 
}) 
export class FooComponent { 

    constructor(private builder:UrlBuilder) {} 

    ngOnInit() { 
     this.builder.doSomething() 
    } 

} 

在另一方面，如果你唯一的問題是與模板你爲什麼不直接寫他們作爲模板字符串或只是與你的任務管理器中導入它們（的WebPack ..）。一般來說，如果您沒有動態視圖，那麼必須從服務器生成它們，而不是使用http調用來檢索它們，並直接將它們加載到JavaScript文件中。

Answer 2

我已經處理了這個問題，並通過在我的配置/ appSettings中設置baseHref來解決這個問題。使Angular頁面容器成爲.ASPX頁面，在頁面加載時，從配置中設置baseHref。以下是我的網頁中的摘錄。配置：

<appSettings> 
    <add key="AppBaseUrl" value="/MyAngularApp/" /> 
</appSettings> 

這裏是重寫規則，使您的角度應用功能正常，而在IIS所駐留：是不應該

<rewrite> 
    <rules> 
    <rule name="Rewrite Index to Root" stopProcessing="true" enabled="true"> 
     <match url=".*" /> 
     <conditions> 
      <add input="{URL}" pattern="^(.*)(/index.aspx)$" /> 
     </conditions> 
     <action type="Redirect" url="{C:1}" /> 
    </rule> 
    <rule name="Angular" stopProcessing="true" enabled="true"> 
     <match url="^(.*)$" ignoreCase="false" /> 
     <conditions logicalGrouping="MatchAll"> 
     <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
     <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
     </conditions> 
     <action type="Rewrite" url="index.aspx/{R:0}" appendQueryString="true" /> 
    </rule> 
    </rules> 
</rewrite>