将模板html中的<link>标记重构为styleUrls

Question

我正在尝试重构一个Component,它将其html模板中的样式表链接到使用styleUrls.

链接的模板具有相似的含义;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

我把它重构成了;

styleUrls: [
    'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'
],
encapsulation: ViewEncapsulation.None

我可以确认样式表已加载,但是它被加载为内联样式而不是通过链接标记,因为这样引用为;

src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');

不要指向;

https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?v=4.4.0

而是为了;

http://localhost:9000/fonts/fontawesome-webfont.eot?v=4.4.0

我将如何重构html模板以使用styleUrls,同时保留相对引用？

Answer 1

我能够找到解决这个问题的唯一方法是在后续评论中提到的。

您必须创建一个自定义 UrlResolver。这是对 Angular2 Material 存储库的测试，他们在其中实现了自定义 url 解析器。下面的相关部分。

import {TestUrlResolver} from './test_url_resolver';
import {..., bind} from 'angular2/core';

bind(UrlResolver)
    .toValue(new TestUrlResolver());

这是 TypeScript 版本TestUrlResolver（另一个版本是 Dart 版本）：

import {UrlResolver} from 'angular2/src/core/compiler/url_resolver';

export class TestUrlResolver extends UrlResolver {
  constructor() {
    super();
  }

  resolve(baseUrl: string, url: string): string {
    // The standard UrlResolver looks for "package:" templateUrls in
    // node_modules, however in our repo we host material widgets at the root.
    if (url.startsWith('package:angular2_material/')) {
      return '/base/dist/js/dev/es5/' + url.substring(8);
    }
    return super.resolve(baseUrl, url);
  }
}