覆盖 UrlResolver

Question

我一直在努力 Angular 2 tutorial (in TypeScript) when I got stuck on this part。他们现在想将模板分成单独的文件。这很好，很花哨，但我有一个古怪的设置：我使用 ASP.NET MVC 提供文件，它拒绝提供 Views 文件夹中的文件。很公平：我预计需要提供 Razor (.cshtml) 文件，所以我很乐意尝试解决这个问题，而不仅仅是将 .html.

列入白名单

我之前使用过 Angular 1，在这种情况下，我使用 decorator to modify the $templateRequest service 将模板 URL 修改为 MVC 可以接受的内容，然后我设置 MVC 来提供服务相应的文件。如果我自己这么说的话，这是相当聪明的工作。所以我只需要在 Angular 2 中复制它，对吧？那应该很容易。

错了。大错特错。经过一些猜测后谷歌搜索我发现 UrlResolver ，经过一些客户端调试我确认，这是我想要扩展的 class 。文档甚至说：

This class can be overridden by the application developer to create custom behavior.

是的！这正是我想要做的。不幸的是，没有提供如何覆盖它的示例。我发现这个 DemoUrlResolver and this MyUrlResolver, but I can't figure out how or if either of them works. I've tried the multiple approaches to supplying my custom provider (see ) 包括 bootstrap 和提供者（在模块和应用程序组件上）的方法都无济于事。

如何覆盖 UrlResolver？

我认为这无关紧要，但目前我的扩展除了遵从基础之外什么都不做 class:

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

Answer 1

有趣的问题。由于它是编译器的一部分，因此它不会与其他应用程序组件一起实例化是有道理的，经过一些研究和分析 angular 的代码后，我找到了解决方案。您需要在对 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);

覆盖 UrlResolver

Override UrlResolver

asp.net-mvc

dependency-injection

typescript

typescript2.0

angular