Как использовать службу или глобальную функцию в объявлении @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 (компонент, инъецируемый ...), но в вашем случае создать инъекцию не имеет значения. Создать угловое приложение не означает, что все ваши файлы должны содержать угловатые объекты, вы также можете создать основные классов/константу ..

Например, если вы хотите помощник, который построить URL для вас, вы можете создайте класс и используйте его в объявлении компонента, просто импортировав его.

//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

Я справился с этой проблемой, и я решил ее, установив baseHref в настройках моей конфигурации/appSettings. Сделайте контейнер с угловой страницей на странице .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>