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

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">

我用的是Angular6、如何实现？

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）

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

How to use asp-fallback like option in Angular 6

cdn

angular

asp.net-core-2.1