Question

当我遇到tutorial时，我一直在使用Angular 2 this part（在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

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

1 个答案: