使用一个组件 Angular2 的全宽答案

【问题标题】：Use full width of one component Angular2使用一个组件 Angular2 的全宽
【发布时间】：2016-08-06 05:57:04
【问题描述】：

我想知道是否有人知道您如何在 Angular 2 中设置一个带有背景的组件的全宽。只想在主屏幕上使用它。

以下更改所有组件，因此不起作用。

 encapsulation: ViewEncapsulation.None,

【问题讨论】：

标签： html css angular

【解决方案1】：

如果你使用 ViewEncapsulation.None，那么你可以这样做：

@Component({
  selector: 'my-component',
  providers: [],
  template: `
    <div>
      Hello
    </div>
  `,
  styles:
  [
      'my-component { float:left;width:100%;padding:5px;background:#ccc;}',
      'html, body {margin:0px; }' 
  ],
  encapsulation: ViewEncapsulation.None
})

在此处查看 Plunker：https://plnkr.co/edit/b3jtpO5TAkV4eK0ZuR1k?p=preview

【讨论】：

关闭，但它仍然是左右边距（因为我猜是我的 app.component）
margin是因为HTML和BODY标签需要有margin:0px :)
边距也不会消失，已经尝试过了。 ://
wops 发现问题出在另一个 css 文件中 :)
哈哈，很酷 - 我本来打算把这个发给你的 :) plnkr.co/edit/b3jtpO5TAkV4eK0ZuR1k?p=preview