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注入无关。这与＆＃34;如果你不介意我说＆＃34;糟糕的设计而不使用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类从未在页面中注入，因此不会应用它。其他课程也是如此。我希望你得到逻辑。

另外，一个半相关的注释，portfolio.component.ts中的css文件名是错误的。在大写的情况下，实际文件是小型的。

Answer 2

删除前导＆＃39; ..＆＃39;？

 styleUrls: ['/app/styles/templateMobile.css', '/app/styles/templateOther.css']

或亲戚

['./styles/templateMobile.css', './styles/templateOther.css']

刷新页面时，Angular2不会注入模板CSS

2 个答案: