Question

我正在开发一个可在离线和在线服务器中使用的应用程序。因此，我想选择一个选项，即联机服务器应使用CDN中必要的css / js文件，而脱机服务器应使用本地中的文件。

样本asp-fallback-href选项。我在下面的代码中了解到它将按预期工作。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
              asp-fallback-href="~/vendor/fortawesome/fontawesome-free/css/all.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
              crossorigin="anonymous">

我使用Angular 6，如何实现？

Answer 1

所有asp-fallback*属性所做的就是添加一些额外的JavaScript以在测试失败时动态加载后备src / href。换句话说：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" />
<script>
    (function () {
        var testElement = document.createElement('span');
        testElement.className = 'sr-only';
        if (testElement.style.position !== 'absolute') {
            var head = document.getElementsByTagName('head')[0];
            var link = document.createElement('link');
            link.href = '/vendor/fortawesome/fontawesome-free/css/all.css';
            link.rel = 'stylesheet';
            head.appendChild(link);
        }
    })();
</script>

您可以使用data-*属性来模拟后备href和必需测试的相同内联定义，并且只需相应地修改代码以使用这些值而不是硬编码值即可概括脚本。您也可以通过简单地使用动态加载库来更好地为您服务，该库通常具有运行内置的这类条件包含项的能力（例如fallback.io）

如何在Angular 6中使用asp-fallback like选项

1 个答案: