角度 - 親からカスタムコンポーネントにスタイルが適用されていない

Question

この例では余白が適用されない理由はわかりません。十分なストレートを望む。

アプリケーションテンプレート：

<my-component class="my-class">Test</my-component> 
<div>Some Conent</div> 

アプリのスタイル：

.my-class { margin-bottom: 30px; } 
div { background-color: red; } 

コンポーネントテンプレート：

<div><ng-content></ng-content></div> 

div要素は赤色の背景を取得しますが、両者の間に余裕がありません。

Plunker：https://plnkr.co/edit/oUczApNhhPrAOKy5Iclp

Answer 1

角度からコンポーネントセレクタは、したがって、彼らはデフォルトのスタイルを持っていない、「本物の」HTML要素ではありませんので。そのため、ブラウザではブラウザの表示方法がわからず、コンポーネント周辺のCSSレイアウトに影響を与えるスタイルは適用されません（例：marginまたはheight）。

これを修正するには、以外の値を持つcss displayプロパティをコンポーネントに適用する必要があります。

たとえば

：答えを

.my-class { 
    display: block; 
    margin-bottom: 30px; 
}