2016-05-02 16 views
13

Tôi có một ứng dụng mà sử dụng bộ chọn portfolio-app và có 2 stylesheets - '../app/styles/templateMobile.css', '../app/styles/templateOther.css'Angular2 không tiêm mẫu CSS khi làm mới trang

Bây giờ khi tôi mở ứng dụng của tôi từ địa chỉ URL mặc định (localhost: 3000 ATM), các stylesheets được áp dụng đúng cách. Nhưng khi tôi đi đến một tuyến đường khác, và nhấn làm mới (F5), các kiểu mẫu không được áp dụng cho trang. Điều tương tự cũng xảy ra khi tôi bắt đầu trên một tuyến đường khác.

Không có thông báo lỗi trong bảng điều khiển.

Tôi đã thử nghiệm điều này trong firefox, chrome và safari, chế độ ẩn danh và xóa bộ nhớ cache của trình duyệt. Tôi cũng đã thử nghiệm trên một LG G2, iPhone, iPad và nhiều trình giả lập Android khác nhau (Nexus 9, Nexus 10, Galaxy Nexus). Tất cả thời gian kết quả là như nhau.

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

Nếu bạn cần thêm thông tin, xin vui lòng hỏi, hoặc duyệt trough kho gitHub. (tất cả các tệp có liên quan đều nằm trong thư mục ứng dụng).

Cảm ơn sự giúp đỡ.

+0

Bạn có gặp bất kỳ lỗi nào trong bảng điều khiển trình duyệt không? –

+0

Không, chỉ là thông báo chuẩn mà Angular 2 đang chạy trong chế độ phát triển –

Trả lời

7

tôi nhân bản repo của bạn, phong cách của bạn đang tải tốt. Vấn đề bạn đang gặp không liên quan đến việc tiêm CSS. Nó liên quan đến "nếu bạn không nhớ tôi nói" thiết kế xấu và không sử dụng ViewEncapsulation.

Trước khi tôi giải thích vấn đề, tôi phải nói rằng theo cách hiện tại của bạn khi sử dụng CSS, bạn sẽ sử dụng một tệp CSS toàn cục tốt hơn.

Giải thích
Khi bạn không sử dụng xem đóng gói, mọi CSS bạn nhập sẽ dính vào trang cho đến khi bạn làm mới. Nó sẽ không bao giờ bị xóa. Và nó sẽ được áp dụng cho bất kỳ yếu tố nào trên trang mà nó áp dụng. Và bởi vì nó chỉ được chèn vào khi bạn truy cập vào component/route tương ứng, khi bạn làm mới trang, một số CSS không được đưa vào trang vì bạn chưa truy cập vào thành phần đó.

Tôi sẽ tham gia lớp học appContainer làm ví dụ để giúp giải thích sự cố.

Trong styles/landingOther.css bạn có:

.appContainer { 
    width: 60%; 
} 

Bởi vì tuyến đường mặc định của bạn là /landing, khi bạn truy cập vào trang http://localhost:3000/, lớp .appContainer sẽ được tiêm vào trang và sẽ ở lại trên trang cho đến khi bạn làm mới. Vì vậy, khi bạn định tuyến đến /portfolio, appContainer vẫn được tiêm trong trang và nó sẽ được áp dụng. Tuy nhiên, khi bạn trực tiếp truy cập http://localhost:3000/portfolio, thành phần landing không bao giờ được truy cập, do đó lớp .appContainer chưa bao giờ được chèn vào trang để nó sẽ không được áp dụng.Và cũng vậy với các lớp khác. Tôi hy vọng bạn có được logic.

Ngoài ra, ghi chú bán liên quan, tên tệp css trong portfolio.component.ts của bạn là sai. Đó là trong trường hợp vốn trong khi các tập tin thực tế là nhỏ cased.

+0

Hey, toàn bộ lý do tôi đang sử dụng đóng gói xem là này - http://stackoverflow.com/questions/36224276/ angular2-adding-ngcontent-mav-x-to-phong cách. Vì vậy, bạn sẽ đề nghị rằng tôi chỉ sử dụng một bản định kiểu duy nhất và áp dụng nó vào thành phần gốc của tôi? –

+0

@ MihaŠušteršič Dựa trên cách bạn xác định phong cách của mình. Tôi đề nghị bạn đặt nó trong index.html giống như css thông thường ra khỏi các thành phần. Và loại bỏ 'ViewEncapsulation.None' vì nó chỉ áp dụng nếu bạn đã định nghĩa css trong thành phần. – Abdulrahman

+0

@ MihaŠušteršič nói cách khác, nếu bạn có một thành phần mà bạn muốn tách biệt khỏi css toàn cục được định nghĩa trong 'index.html'. Thêm một số kiểu cho 'styles' hoặc' styleUrls'. Nếu bạn không muốn nó bị cô lập, đừng thêm bất kỳ kiểu nào cho nó. – Abdulrahman

1

xóa hàng đầu '..'?

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

hoặc người thân

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

điều này chỉ cần phanh tiêm css. Angular2 hiện chỉ hoạt động với đường dẫn tương đối - kiểm tra http://stackoverflow.com/questions/35188803/angular-2-external-style-doesnt-get-inlined-to-header –

+0

thử ['./styles/templateMobile.css' , './styles/templateOther.css'] – IgorL

+0

vẫn là cùng một vấn đề, css sẽ tải, sau đó khi tôi thay đổi tuyến đường và làm mới, không phải ở đó –

Các vấn đề liên quan