当角度2分量占据页面的整个宽度时如何修复？

Question

我的角度2组件占据了页面的整个宽度.当我限制组件宽度时,其边距会拉伸到全宽.所以我不能带来其他组件.如何限制组件的宽度？我试过显示:内联,但没有用.尽管组件占用全宽,不允许任何东西来到这旁边.

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以在正确的位置设置宽度.在你的例子中,那将是styles参数ItemSet或Item类似

Plunker的例子

无论是在ItemComponent与:host选择(个体经营):

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

或者带有.singleItemas选择器的父组件

@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'];
})