Angular 2：将样式应用于父组件的子节点不适用

Question

以下是我的代码。

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

我-order.component.scss文件

我有

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

当我申请in-menu类从父子组件，border-right:none样式应用到子组件，但子节点选择器.row.orderNow不会受到display:block属性的影响。

Answer 1

我找到了这个问题的两个答案。

1）中使用的传统的CSS样式在SCSS文件这样

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

insted的的

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

似乎存在与角2 selectUrl特征的问题，它不转换SCSS正确地css。 2）使用像gulp-sass或scss-2-css这样的npm模块将scss正确转换为css文件，并在styleUrls中使用该css（如果您不想在scss完整功能上妥协）。