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

Posted 2023-03-06

【中文标题】将模板 html 中的 <link> 标签重构为 styleUrls

【英文标题】：Refactoring <link> tag in template html to styleUrls

【发布时间】：2015-12-17 05:35:06

【问题描述】：

我正在尝试重构一个组件，它将其 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，同时保留相对引用？

【问题讨论】：

这很有趣。但老实说，我认为不存在，或者永远不会有内置的东西来解决这个问题。所以你最好的选择就是把它放在你的 HTML 标题中。

我认为对这个链接有用你的作品点击链接golang.org/pkg/html/template

在优化和解决您的问题方面，将 repo 作为项目中的组件获取不是更好的主意，然后不要从外部“maxcdn ... “等等？

【参考方案1】：

我能找到的唯一方法是在随后的 cmets 中使用mentioned here。

您必须创建一个自定义 UrlResolver。 Here is a test 在 Angular2 Material 存储库中实现自定义 url 解析器。下面的相关部分。

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

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

这是 TestUrlResolver 的 TypeScript 版本（另一个版本在 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);