Question

假设我有一个组件MyComponent，其视图包含一个表

        <table>
            <thead>
                <tr>
                    <th class="col1">COL1</th>
                    <th class="col2">COL2</th>
                    <th class="col3">COL3</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="#item of items">
                    <td class="col1">{{item.content1}}</td>
                    <td class="col2">{{item.content2}}</td>
                    <td class="col3">{{item.content3}}</td>
                </tr>
            </tbody>
        </table>

我想在不同容器中的MyComponent（例如Container1和Container2）并且能够使用我可以附加的CSS文件定义表的某些属性（例如每列的宽度）到容器。例如在Container1中，我可以像这样定义一个CSS文件

.col1 {
    width: 40%;
}
.col2 {
    width: 30%;
}
.col3 {
    width: 30%;
}

在Container2中我可以拥有一个具有不同属性的不同CSS文件。这可能吗？感谢

Answer 1

您可以利用ngStyle和Input例如：

MyComponent将是：

@Component({
  selector:'table-component',
  template:`
    <table>
      <thead>
        <tr>
          <th [ngStyle]="col1css">COL1</th>
          <th [ngStyle]="col2css">COL2</th>
          <th [ngStyle]="col3css">COL3</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="#item of items">
          <td [ngStyle]="col1css">{{item.content1}}</td>
          <td [ngStyle]="col2css">{{item.content2}}</td>
          <td [ngStyle]="col3css">{{item.content3}}</td>
        </tr>
      </tbody>
  </table>`
})
export class MyComponent{
  @Input() col1Css;
  @Input() col2Css;
  @Input() col3Css;
}

然后在容器中：

@Component({
    selector: 'container1',
    directives:[MyComponent],
    template: `<table-component [col2Css]="col2Css" [col3Css]="col3Css" [col1Css]="col1Css"></table-component>`
})
export class Container1 {
  col1Css = {'width':'40%'};
  col2Css = {'width':'30%'};
  col3Css = {'width':'30%'};
}

Example in a plunker

Answer 2

如果您有不同的.css个文件，则可以在styleUrls装饰器中使用@Component，这可以接受array字符串。请注意，您可以通过多种方式实现目标，并且范围广泛，因此很难说出特定的方式。但我觉得这可以帮助你（不知道到哪个延伸）。在plunker中，我正在使用具有不同属性的不同样式表。你的问题可以有很多答案。

http://plnkr.co/edit/RaJgtc?p=preview

@Component({
  ...
  styleUrls: ['src/style.css','src/styleone.css'],
  ...
})

Answer 3

我建议首先使用@ Abdulrahman的方法，如果你遇到需要更多灵活性的情况，因为你事先不知道应该从外面设置什么样的风格，你可以使用阴影穿刺CSS组合器Form1：

>>>

@Component({
  selector: 'container1-cmp',
  directives: [MyComponent],
  template: `
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>`,
  styles: [`
    my-component >>> .col1 { width: 40%; }
    my-component >>> .col2 { width: 30%; }
    my-component >>> .col3 { width: 30%; }
  `]
})
export class Container1Cmp {
}

Angular2组件样式由容器定义的CSS驱动

3 个答案: