如何解決angular 2組件佔用頁面全部寬度的問題？

我的角度2組件正在採取頁面的整個寬度。當我限制組件寬度時，它的邊距被拉伸到全寬。所以我不能把這個旁邊的其他組件。我怎樣才能限制組件的寬度？我試過顯示：內聯，但沒有用。即使組件採取全寬度，沒有任何東西在這旁邊。如何解決angular 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; 
}

來源

2016-07-31 Rohith Murali

我們怎麼樣幫助不看代碼？ ....發佈重現問題的最小工作代碼片段。 – LGSon

添加代碼。我剛開始使用angular2。 @LGSon –

我們需要一個_working代碼片段_，這是一個呈現結果的東西，最好作爲一個堆棧片段，但一個小提琴也可以工作。 – LGSon

您需要添加CSS設置寬度在正確的地方。在您的示例會是這樣的ItemSet的styles參數或Item等

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

來源

2016-07-31 09:53:30

如何解決angular 2組件佔用頁面全部寬度的問題？

回答

相關問題