将 UrlResolver 用于组件相对 URL

Question

我想使用 UrlResolver 在我的模板中使用组件相对 URL。

我已经在我的代码中实现了 UrlResolver，如下所述：http://dfbaskin.com/posts/angular2-url-resolver-for-component-assets/

但是每次浏览器控制台只显示错误“No provider for UrlResolver！”。

我对 Angular 完全陌生。知道如何解决这个问题吗？

顺便说一句：我正在使用 SystemJS。

我的组件.ts：

import {Component} from "@angular/core";
import {UrlResolver} from "@angular/compiler";

@Component({
    moduleId: module.id,
    templateUrl: "my-template.html"
})

export class PageNotFoundComponent {
    constructor(private urlResolver: UrlResolver) {
    }

    public resolvePath(path) {
        return this.urlResolver.resolve(module.id, path);
    }
}

在我的模板 (my-template.html) 中，我有以下 HTML：

<img [src]="resolvePath('some-resource.png')"/>

Answer 1

要直接回答您的问题，您应该将providers: [UrlResolver] 添加到您的@Component。

像这样：

@Component({
    moduleId: module.id,
    templateUrl: "my-template.html",
    providers: [UrlResolver]
})

但这对我来说并没有解决主要问题 - 如何获取资源的相对路径。 因为后来它开始抱怨“没有令牌应用程序包根 URL 的提供者！”。

也许你至少可以推得更远。