Question

下面是我的代码。

await

在my-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; } }类应用于父组件的子组件时，in-menu样式应用于子组件，但具有选择器border-right:none的子节点不会受到影响.row.orderNow财产。

Answer 1

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

1）在scss文件中使用传统的css样式，如此

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

insted of

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

似乎角度2 selectUrl功能存在问题，它没有正确地将scss转换为css。

2）使用像gulp-sass或scss-2-css这样的npm模块将scss正确转换为css文件，如果你不想在scss完整功能上妥协，可以在styleUrls中使用那个css。

Angular 2：从父级应用样式到子组件的子节点不应用

1 个答案: