覆盖 UrlResolver

Question

当我遇到this part 时，我一直在使用 Angular 2 tutorial（在 TypeScript 中）。他们现在想将模板分成单独的文件。这很好，很花哨，但我有一个古怪的设置：我使用 ASP.NET MVC 提供文件，它拒绝提供来自 Views 文件夹的文件。很公平：我预计需要提供 Razor (.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

有趣的问题。由于它是编译器的一部分，因此它不会与其他应用程序组件一起实例化是有道理的，经过一些研究和分析 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);