css - Angular2 刷新页面时不注入(inject)模板CSS

Question

我有一个使用选择器 portfolio-app 并有 2 个样式表的应用程序 - '../app/styles/templateMobile.css', '../app/styles/templateOther.css'

现在，当我从默认 URL (localhost:3000 ATM) 打开我的应用程序时，样式表得到正确应用。但是当我转到不同的路线并按刷新 (F5) 时，模板样式不会应用于页面。当我从不同的路线开始时，同样的事情也会发生。

控制台中没有错误消息。

我在 firefox、chrome 和 safari 中测试了这个，隐身模式并清除了浏览器缓存。我还在 LG G2、iPhone、iPad 和各种安卓模拟器(Nexus 9、Nexus 10、Galaxy Nexus)上进行了测试。结果始终相同。

应用程序组件:

import { Component } from 'angular2/core';
import {ViewEncapsulation} from 'angular2/core';
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';

import { LandingComponent } from './landing.component';
import { PortfolioComponent } from './portfolio.component';
import { PagesService } from './pages.service';

@Component({
    selector: 'portfolio-app',
    templateUrl: '/app/views/template.html',
    styleUrls: ['../app/styles/templateMobile.css', '../app/styles/templateOther.css'],
    encapsulation: ViewEncapsulation.None,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS, PagesService]
})

@RouteConfig([
    { path: '/landing', name: 'Landing', component: LandingComponent, useAsDefault: true },
    { path: '/portfolio', name: 'Portfolio', component: PortfolioComponent }
])

export class AppComponent {
    landing = true;
    portfolio = false;

    changeMiniNavLanding = function () {
        this.landing = true;
        this.portfolio = false;
    }

    changeMiniNavPortfolio = function () {
        this.landing = false;
        this.portfolio = true;
    }
}

主.ts:

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

如果您需要更多信息，请询问或浏览 gitHub存储库。 (所有相关文件都在 app 文件夹中)。

感谢您的帮助。

Answer 1

我克隆了您的存储库，您的样式加载正常。您遇到的问题与 CSS 注入(inject)无关。这与“如果你不介意我说的话”糟糕的设计和不使用 ViewEncapsulation 有关。

在我解释这个问题之前，我不得不说，以你目前使用 CSS 的方式，你最好使用一个全局 CSS 文件。

解释
当您不使用 View 封装时，您导入的每个 CSS 都会粘在页面中，直到您刷新它。它永远不会被删除。它将应用于页面上它所适用的任何元素。并且因为它仅在您访问相应的 component/route 时插入，所以当您刷新页面时，某些 CSS 不会被注入(inject)到页面中，因为您还没有访问它所在的组件。

我将以类appContainer为例来帮助说明问题。

在 styles/landingOther.css 你有:

.appContainer {
    width: 60%;
}

因为你的默认路由是/landing，当你访问页面http://localhost:3000/时，.appContainer类将被注入(inject)到页面中并停留在页面上，直到您刷新。因此，当您路由到 /portfolio 时，appContainer 仍会注入(inject)到页面中并且会被应用。但是，当您直接转到 http://localhost:3000/portfolio 时，永远不会访问 landing 组件，因此 .appContainer 类从未在页面中注入(inject)，因此不会应用。其他类(class)也是如此。我希望你明白逻辑。

另外，一个半相关的注意事项，您的 portfolio.component.ts 中的 css 文件名是错误的。它是大写的，而实际文件是小写的。