当 angular 2 组件占据页面的全宽时如何解决？答案

【问题标题】：How to fix when angular 2 component take full width of the page?当 angular 2 组件占据页面的全宽时如何解决？
【发布时间】：2016-07-31 19:06:12
【问题描述】：

我的 angular 2 组件占据了整个页面的宽度。当我限制组件宽度时，它的边距被拉伸到全宽。所以我不能把其他组件放在这个旁边。如何限制组件的宽度？我试过 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;
}

【问题讨论】：

不看代码怎么办？？ ....发布一个最小的工作代码 sn-p 重现问题。
添加了代码。我刚刚开始使用angular2。 @LGSon
我们需要一个工作代码sn-p，可以渲染结果的东西，最好是堆栈sn-p，但小提琴也可以工作
代码末尾的.singleItem{ width:300px; } 应该做什么？这需要在 @Component(...) 装饰器的 styles: [...] 属性中。

标签： css angular

【解决方案1】：

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

Plunker example

在ItemComponent 和:host 选择器（自我）上：

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

【讨论】：