角2：親コンポーネントから子コンポーネントの子ノードにスタイルを適用しない

Question

以下は自分のコードです。私は親から子コンポーネントにin-menuクラスを適用すると、私の-order.component.scssファイル内

Component({ 
    selector: 'riceit-my-order', 
    templateUrl: './my-order.component.html', 
    styleUrls: ['./my-order.component.scss'] 
}) 

私は

.row.orderNow{ 
    display:none; 
} 
host(.in-menu){ 
    border-right:none; 
    .row.orderNow{ 
     display:block; 
    } 
} 

を持って、border-right:noneスタイルは、子コンポーネントが、子ノードに適用されますセレクタ.row.orderNowはdisplay:blockプロパティの影響を受けていません。

Answer 1

この問題で2つの回答が見つかりました。

1）は、それはSCSS変換されていない、角度2 selectUrl機能で問題があるようだ

host(.in-menu){ 
    border-right:none; 
    .row.orderNow{ 
     display:block; 
    } 
} 

のこの

:host(.in-menu){ 
    border-right:none; 
} 
:host(.in-menu) .row.orderNow{ 
    display:block; 
} 

instedようSCSSファイルで、伝統的なCSSスタイルを使用しました適切にCSSに。

2）gss-sassまたはscss-2-cssのようなnpmモジュールを使用して、scssをcssファイルに正しく変換し、scssのフル機能で妥協したくない場合はstyleUrlsにそのCSSを使用してください。