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

Question

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

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

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

Answer 1

Я клонировал ваш репозиторий, ваши стили загружаются хорошо. Проблема, с которой вы сталкиваетесь, не связана с введением CSS. Это связано с «если вы не возражаете, что я говорю« плохой дизайн и не использую ViewEncapsulation ».

Прежде чем я объясню проблему, я должен сказать, что в вашем текущем способе использования CSS вам лучше использовать один глобальный файл CSS.

Объяснение
Если вы не используете вид инкапсуляции, каждый CSS импорта будет придерживаться на странице, пока вы не обновите его. Он никогда не будет удален. И он будет применяться к любому элементу на странице, к которому он относится. И поскольку он вставлен только при посещении соответствующего component/route, при обновлении страницы некоторые CSS не вводятся на страницу, потому что вы не посещали компонент, на котором он был включен.

Я возьму класс appContainer в качестве примера, чтобы помочь объяснить проблему.

В styles/landingOther.css у вас есть:

.appContainer { 
    width: 60%; 
} 

Поскольку маршрут по умолчанию /landing, когда вы посещаете страницу http://localhost:3000/, то .appContainer класс будет закачиваться на страницу и будет оставаться на странице, пока не обновят. Итак, когда вы направляетесь в /portfolio, appContainer все еще вводится на страницу, и он будет применяться. Но, когда вы напрямую переходите на , компонент landing никогда не посещается, поэтому класс .appContainer не был введен на страницу, поэтому он не будет применяться.То же самое касается и других классов. Надеюсь, вы получите логику.

Кроме того, неправильное примечание, связанное с точкой, имя файла css в вашем portfolio.component.ts. Это в капитале, в то время как фактический файл небольшой.

Answer 2

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

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

или родственник

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