Wie zu beheben, wenn eckige 2-Komponente die volle Breite der Seite nehmen?

Question

Meine angular 2 Komponenten nehmen die volle Breite der Seite. Wenn ich die Breite der Komponente begrenze, wird der Rand auf die volle Breite gestreckt. So kann ich andere Komponenten nicht dazu bringen. Wie kann ich die Breite von Bauteilen begrenzen? Ich habe versucht Display: Inline, aber keine Verwendung.Noch die Komponente nimmt volle Breite, so dass nichts neben diesem kommen.

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; 
    } 
} 

In Stylesheet

.singleItem{ 
    width:300px; 
} 

Answer 1

Sie müssen die CSS setzen die Breite an der richtigen Stelle hinzuzufügen. In Ihrem Beispiel wäre das die styles Parameter von ItemSet oder Item wie

Plunker example

Entweder auf den ItemComponent mit der :host Selektor (Selbst-):

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

oder der übergeordneten Komponente mit .singleItem als Selektor

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