css - 当 Angular 2 组件占据页面的整个宽度时如何解决？

Question

我的 angular 2 组件占据了页面的整个宽度。 当我限制组件宽度时，它的边距被拉伸(stretch)到全宽。 所以我不能带其他组件。如何限制组件的宽度？ 我试过 display: inline，但没有用。组件仍然占据全宽，不允许除此之外的任何内容。

import { Component } from '@angular/core';
import { Item }    from './../item';
import { ItemComponent }    from './ItemComponent';

@Component({
  selector: 'Item-Set',
  directives: [ItemComponent],
  template: '<div class="singleItem" *ngFor="let eachItem of itemList"><Item></Item></div>'
})

export class ItemSet{
  itemList: Item[];
  constructor(){
    this.itemList=ItemList;
  }
}

在样式表中

.singleItem{
  width:300px;
}

Answer 1

您需要添加 CSS 以在正确的位置设置宽度。在您的示例中，它是 ItemSet 或 Item 的 styles 参数

Plunker example

在 ItemComponent 上使用 :host 选择器(self):

@Component({
  selector: 'Item',
  template: '<div>Item</div>',
  styles: [':host {display: block; border: solid 1px red; width: 300px;}']
})
export class ItemComponent{}

或者以.singleItem作为选择器的父组件

@Component({
  selector: 'Item-Set',
  directives: [ItemComponent],
  styles: [`
    .singleItem{width:300px;}
    :host {display: block; border: solid 1px green;}`
  ]
  template: '<div class="singleItem" *ngFor="let eachItem of itemList"><Item></Item></div>'
})
export class ItemSet{
  itemList = ['a', 'b', 'c', 'd'];
})