代码之家 › 专栏 › 技术社区 › Rohith Murali

如何修复角度2组件占据页面全宽的情况?

angular css

Rohith Murali · 技术社区 · 8 年前

我的角度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;
}

1 回复 | 直到 8 年前

Günter Zöchbauer 8 年前

您需要添加CSS以在正确的位置设置宽度。在您的示例中,这是不是 styles 的参数 ItemSet 或 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'];
})

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前