Question

在Angular中，我需要使用一些CSS（Sass）规则选择父组件的第一个子组件。我有一个项目列表是一个组件，然后我有列表项，它们是组件本身。所以它的结构如下：

<product-list>
    <list-item />
    <list-item />
    <list-item />
</product-list>

每个组件的CSS规则仅与该组件隔离，因此我无法使用第一个子选择器来选择第一个列表项。

换句话说，由于产品列表Sass文件中的规则不适用于其子项，并且列表项Sass文件中的规则不适用于其父项，我不能使用product-list：first-child在两个Sass文件中的任何一个文件中，因为任一文件都需要引用列表父文件和列表子文件。

首先，我想知道调用这个CSS规则隔离是什么。这是一个很好的功能，但它阻止了我。

我可以在全球SASS中编写规则，但这似乎不是最佳方式。

有人能告诉我真正的Angular方式吗？

Answer 1

你去https://plnkr.co/edit/FPqx6m12tkmMFlf5LvJl?p=preview

@Component({
    selector: "my-li",
    styles:[`
     :host {
         color:blue

     }

    `]
    template: `
        <li>This is my li</li>
    `
})
export class MyLi {

}


@Component({
    selector: "navbar",
    directives: [NgFor,MyLi], 
    styles: [`
        my-li:nth-child(2){
          color: yellow;
        }
    `],
    template: `
        <h2>Democratic Party presidential candidates</h2>
        <ul>
          <my-li *ngFor="#item of items; #i = index">{{item}} {{i}}</my-li>
        </ul>
    `
})
export class Navbar {
    items: Array<String>

    constructor() {
      this.items = [
        "Hillary Clinton",
        "Martin O'Malley",
        "Bernie Sanders"
      ]
    }

}

注意：这是使用旧版本的Angular2，在新版本中 @component 中没有指令数组，所以不要混淆，只需看看样式。

另一个Angular组件

1 个答案: