Override UrlResolver

Question

this part에 걸렸을 때 Angular 2 tutorial (TypeScript에서) 작업을했습니다. 이제는 템플릿을 별도의 파일로 분리하려고합니다. 멋지다.하지만 기발한 설정이있다. 필자는 ASP.NET MVC로 파일을 제공하고 있으며 Views 폴더에서 파일을 제공하는 것을 거부하고있다. 공정성 : 면도기 (.cshtml) 파일을 제공 할 필요가 있기 때문에 화이트리스트 .html 대신이 파일을 해킹 해 주셔서 기쁘게 생각합니다.

이전에는 Angular 1로 작업했으며,이 경우 decorator을 사용하여 $templateRequest service을 수정하여 템플릿 URL을 MVC에서 허용하는 것으로 수정 한 다음 해당 파일을 제공하도록 MVC를 설정했습니다. 내가 그렇게 말하면 아주 영리한 일을한다. 그래서 이것을 Angular 2에서 복제해야합니다. 맞습니까? 그렇게 쉬워야합니다.

틀린. 틀렸어. 몇 가지 추측 작업이 끝나면 UrlResolver을 발견했습니다. 클라이언트 측에서 디버깅을 한 후에 확장하려는 클래스가 있습니다. 설명서는 다음과 같이 말합니다 :

이 클래스는 사용자 정의 동작을 만들기 위해 응용 프로그램 개발자가 재정의 할 수 있습니다.

예! 이것은 내가하고 싶은 일입니다. 불행하게도 그것을 재정의하는 방법의 예제는 제공되지 않았습니다. 이 DemoUrlResolver과이 MyUrlResolver을 찾았지만 어떻게 작동하는지 또는 둘 중 하나가 작동하는지 알 수 없습니다. 부트 스트랩과 제공자 (모듈과 앱 구성 요소에있는)를 포함하여 내 맞춤형 제공 업체 (this answer 참조)에 대한 여러 가지 접근 방법을 사용해 보았습니다.

어떻게 UrlResolver를 재정의합니까?

나는 그것이 중요하지 않습니다 생각하지만, 그 순간에 내 확장은 아무것도하지 않습니다하지만 기본 클래스에 연기 :

class MvcUrlResolver extends UrlResolver { 
    resolve(baseUrl: string, url: string): string { 
     return super.resolve(baseUrl, url); 
    } 
} 

Answer 1

흥미로운 질문을. 그것이 컴파일러의 일부이기 때문에 다른 응용 프로그램 구성 요소와 함께 인스턴스화되지 않을 것이라는 것이 합리적입니다. 일부 연구 및 각도 코드를 분석 한 결과 해결책을 찾았습니다. platformBrowserDynamic() 호출에서 직접 제공해야합니다. 이 경우 기본 컴파일러 옵션으로 병합되며 컴파일러를 인스턴스화하는 인젝터에서 사용됩니다.

import { COMPILER_OPTIONS } from '@angular/core'; 

class MvcUrlResolver extends UrlResolver { 
    resolve(baseUrl: string, url: string): string { 
     let result = super.resolve(baseUrl, url); 
     console.log('resolving urls: baseUrl = ' + baseUrl + '; url = ' + url + '; result = ' + result); 
     return result; 
    } 
} 

platformBrowserDynamic([{ 
    provide: COMPILER_OPTIONS, 
    useValue: {providers: [{provide: UrlResolver, useClass: MvcUrlResolver}]}, 
    multi: true 
}]).bootstrapModule(AppModule);