刷新页面时,Angular2不会注入模板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和各种Android模拟器(Nexus 9,Nexus 10,Galaxy Nexus).结果总是一样的.

app.component:

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;
    }
}

main.ts:

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

bootstrap(AppComponent);

如果您需要其他信息,请询问,或浏览gitHub存储库.(所有相关文件都在app文件夹中).

谢谢您的帮助.  

Answer 1

我克隆了你的回购,你的风格装得很好.您遇到的问题与CSS注入无关.这与"如果你不介意我说"糟糕的设计而不使用ViewEncapsulation有关.

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

说明
如果不使用视图封装,则导入的每个CSS都将粘贴在页面中,直到您刷新它为止.它永远不会被删除.它将应用于页面上适用的任何元素.并且因为它只在您访问相应的component/route时才插入,当您刷新页面时,一些CSS不会被注入页面,因为您没有访问它所在的组件.

我将以全班appContainer为例帮助解释问题.

在styles/landingOther.css你有:

.appContainer {
    width: 60%;
}

因为您的默认路由是/landing,当您访问该页面时http://localhost:3000/,.appContainer该类将被注入页面并将保留在页面上直到您刷新.因此,当您路由到时/portfolio,appContainer仍会在页面中注入,它将被应用.但是,当您直接访问时http://localhost:3000/portfolio,landing组件永远不会被访问,因此.appContainer该类从未在页面中注入,因此不会应用它.其他课程也是如此.我希望你得到逻辑.

另外,一个半相关的注释,你的css文件名portfolio.component.ts是错误的.它是在大写情况下,而实际文件是小套.