角2的外部風格不會被內聯到頭

我在打字稿這個組件定義：角2的外部風格不會被內聯到頭

import {Component, ViewEncapsulation} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: '/views/sandbox.html', 
    styleUrls: ['/styles/sandbox.css'], 
    styles: [`.wow { background-color: red; }`], 
    encapsulation: ViewEncapsulation.Emulated 
}) 
export class SandBox { }

根據這篇文章：http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html 無論是在樣式部分和外部樣式表的風格應該是以角度內嵌到標題中。

不幸的是，第二個沒有被注入，角度只注入樣式部分中的一個。

我試過從瀏覽器訪問/styles/sandbox.css，這很好。 Angular也能夠訪問/views/sandbox.html，所以我不知道爲什麼它不會發生。

我使用：「angular2」：「2.0.0-beta.2」（最新的beta據我所知）

來源

2016-02-03 Marcell

module.id 請問，當你刪除styleUrls屬性它注入？ – PierreDuc

'風格'始終注入。這是另一個不是。 – Marcell

難道你不能只在你的絕對URL中放第一個斜槓，所以它看起來像這樣'styles/sandbox.css'？這對我有效。 – RVP

我做了從sandbox.css一些測試，奇怪的風格只有在使用中的相對路徑適用styleUrls屬性：

@Component({ 
    selector: 'my-app', 
    templateUrl: '/views/sandbox.html', 
    styleUrls: ['../styles/sandbox.css'], 
    styles: [`.wow { background-color: red; }`], 
    encapsulation: ViewEncapsulation.Emulated 
}) 
export class AppComponent { 
    constructor() { 
    } 
}

編輯

具有看看源代碼之後，Angular2使用絕對路徑styleUrls防止。看到這一行：

https://github.com/angular/angular/blob/master/modules/angular2/src/compiler/style_url_resolver.ts#L12

export function isStyleUrlResolvable(url: string): boolean { 
    if (isBlank(url) || url.length === 0 || url[0] == '/') return false; // <----- 
    var schemeMatch = RegExpWrapper.firstMatch(_urlWithSchemaRe, url); 
    return isBlank(schemeMatch) || schemeMatch[1] == 'package' || schemeMatch[1] == 'asset'; 
}

希望它可以幫助你，蒂埃裏

來源

2016-02-04 10:05:31

它的工作原理，謝謝！然而，我不知道這是否是一個錯誤...作爲絕對的URL與'templateUrl'的作品，但與'styleUrls' – Marcell

無法看到源代碼後，有一個測試，防止使用此...我更新我的答案。 –

我在這個角度回購中添加了一個問題：https：//github.com/angular/angular/issues/6905。我期待着從他們那裏得到答案;-) –

解決這個問題是使用其他css文件爲組件，並添加它的最佳途徑到您的StyleUrls列表中。清潔劑，隨着組件的增長而擴展。

來源

2016-02-04 11:50:23

您可以使用systemjs和commonjs模塊依賴關係加載器來加載模板，樣式和其他文件。

在CommonJS的的moduleId：在systemJs __moduleName

import {Component} from '@angular/core'; 

@Component({ 

moduleId:module.id, 
selector: "exf-header", 
templateUrl: "header.html", 
styleUrls:['header.css'] 

}) 

export class HeaderComponent { 

}

來源

2016-11-23 14:16:32

角2的外部風格不會被內聯到頭

回答

相關問題