添加類Angular2組件的HTML標記不適樣式

在Angular2，當我在我的自定義添加一個類標籤Angular2組件，像這樣：添加類Angular2組件的HTML標記不適樣式

<my-component class="someClass"></my-component>

...造型沒有得到應用到HTML。在Chrome開發人員工具中，當我選擇my-component元素時，樣式檢查器顯示正在應用樣式，但在視覺上它們不是。這是正常的嗎？我該如何解決這個問題？

來源

2017-08-10 user5080246

發佈組件修飾符部分，請 – Vega

：

@Component({ 
selector: 'my-component', 
template: template, 
styleUrls: ['app/components/nav-bar/nav-bar.style.css'], // or you can add explicit style, 
bindings:{ 
    className: '<' 
} 
})

HTML

<my-component class-name="someClass"></my-component>

希望這會幫助你。

來源

2017-08-10 10:02:58

你爲什麼使用這種方法？所有你需要的是添加一些樣式到你的my-component。

CSS

my-component { 
    background: black; 
    text-align: center; 
}

當然，在你的組件如果你想傳遞的任何東西一樣的className然後使用綁定來添加HTML代碼

來源

2017-08-10 09:58:54

實際上，這對Chrome（或任何其他瀏覽器）無效。我遇到的問題與我原來的問題一樣：開發人員工具告訴我風格在那裏，但在視覺上，它不是。 – user5080246

Angular 2使用了Shadow DOM，它是Web Components標準的一部分，並支持DOM樹和樣式封裝。 Angular View Encapsulation

所以，如果你想在我的組件類型的東西，你應該寫你的類在我的組件類。

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

@Component({ 
    teamplte: '<h1 class="myClass">i am my-component</h1>', 
    styles: [` 
     .myClass { 
     someProp: value; 
     } 
    `] 
}) 

export class ConatinerComponent implements OnInit { 
    constructor() { } 

    ngOnInit() { } 
}

但如果你想在外面風格你必須寫你的風格和類的容器組件！

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

@Component({ 
    teamplte: '<my-component class="myClass"></my-component>', 
    styles: [` 
     .myClass { 
     someProp: value; 
     } 
    `] 
}) 

export class MyComponentComponent implements OnInit { 
    constructor() { } 

    ngOnInit() { } 
}

來源

2017-08-10 10:05:00

添加類Angular2組件的HTML標記不適樣式

回答

相關問題