AngularJS css 使用参数重新加载页面时样式丢失

Question

我正在构建一个 AngularJS 页面，使用 UI 路由器进行路由。我的问题是，当我重新加载带有参数的页面时，css 样式表丢失了:(

我的 index.html 中引用了 css 文件，例如：

<link href="Content/css/style.css" rel="stylesheet" />

我的路由配置如下：

  .state('member', {
        url: '/member/:userId',
        views: {
            'content': {
                templateUrl: 'app/views/member.html',
                controller: 'memberController'
            }
        },
        data: {
            access: 'access.user'
        }
    })

我也有 html5mode(true) 如果那有区别的话。我在谷歌上搜索了很多，但没有发现其他人有这个问题，这让我得出结论，我完全误解了一些东西:)有人能在这里指出我正确的方向吗？

Answer 1

我遇到过类似的问题。我总是在刷新时丢失样式表。我尝试在 IE 中加载页面，但看到了一些我在 Chrome:

中没有看到的警告

SEC7113: CSS was ignored due to mime type mismatch
File: reset.min.css

Link 对于 SEC7113：https://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx

-> 检查以确保头部的 css 以这种方式包含：

<link rel="stylesheet" type="text/css" href="css/reset.css">

需要包括类型="text/css"

这也让我来到这里：CSS is not loaded at all in Internet Explorer (SEC7113) 在检查了我的请求之后，我发现我的样式表的 url 是

viewName/css/reset.css

所以我将我的包含更改为

<link rel="stylesheet" type="text/css" href="/css/reset.css">

（css 地址开头的附加斜线），一切都再次工作...

所以你的情况应该是

<link href="/Content/css/style.css" rel="stylesheet" type="text/css" />

希望对您有所帮助。

AngularJS css 使用参数重新加载页面时样式丢失

AngularJS css styles lost when reloading page with parameter

angularjs

angular-ui-router