Angular2 не вводит шаблон CSS при обновлении страницы

У меня есть приложение, которое использует селектор portfolio-app и имеет 2 таблицы стилей - '../app/styles/templateMobile.css', '../app/styles/templateOther.css'

Теперь, когда я открываю свое приложение из URL-адреса по умолчанию (localhost: 3000 ATM), таблицы стилей применяются правильно. Но когда я перехожу на другой маршрут и нажимаю refresh (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. (все соответствующие файлы находятся в папке приложения).

Спасибо за помощь.

Ответ 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 неверно. Это в случае с капиталом, в то время как фактический файл небольшой.

Ответ 2

удалить ведущие '..'?

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

или относительный

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