Question

我正在尝试在“5 MIN QUICKSTART”

上为我的组件使用一些外部CSS

这是我尝试过的（this example之后）：

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';


@Component({
    selector: 'my-selector',
    templateUrl: 'app/shared/my.component.html',
    styleUrls: ['https://example.com/themes/default/style.css'],
    encapsulation: ViewEncapsulation.None,
})

检查plnkr

上的代码

样式不适用于我的组件，当从“开发人员工具”检查“源”时，外部CSS中的images / fonts /似乎没有加载。有什么东西我不见了吗？

Answer 1

export function isStyleUrlResolvable(url: string): boolean { if (isBlank(url) || url.length === 0 || url[0] == '/') return false; var schemeMatch = RegExpWrapper.firstMatch(_urlWithSchemaRe, url); return isBlank(schemeMatch) || schemeMatch[1] == 'package' || schemeMatch[1] == 'asset'; }

似乎对于url方案，将返回false。

解决方案是使用本地css文件，只需导入外部css，如下所示：

@import url("https://example.com/themes/default/style.css");

如何在Angular 2中加载外部CSS？

1 个答案: