将 flexbox 与 angular 2 组件一起使用答案

【问题标题】：Using flexbox with angular 2 components将 flexbox 与 angular 2 组件一起使用
【发布时间】：2016-02-12 19:20:06
【问题描述】：

我想更新我的 angular 2 应用程序的视觉面（网格、颜色）。旧布局是使用 bootstrap 4 构建的，我不再需要它了。我决定使用纯 css3，并使用 flexbox 构建网格。 I made a preview of this grid on codepen.

但是项目中的实施很困难，我现在陷入困境。让我们考虑一个例子：

import {Component} from 'angular2/angular2';


@Component({
  selector: 'some-component',
  template: `
    <aside class="col-4 main-aside"></aside>
    <section class="main-section center"></section>
  `
})
export class SomeComponent { }

如果我在其中引导这个组件，例如.container，我可能会得到这个结果：

<body>
  <!-- .container is flex parent -->
  <div class="container">
    <some-component>
      <!-- .main-aside and .main-section should be flex children -->
      <aside class="main-aside"></aside>
      <section class="main-section center"></section>
    </some-component>
  </div>
</body>

正如您所见，flex 链父级 -> 子级由于它们之间的组件“选择器”而被破坏。我设法通过添加样式来解决这个问题：display: flex; width: 100%; 到来自 chrome 开发工具的组件选择器，但是我不知道如何从代码角度进行这项工作，也不是最好的方法。

非常感谢任何帮助，因为除了不使用 flexbox 之外，我不知道如何解决这个问题。

我正在使用角度 2.0.0-alpha.44

是的，我知道 Angular 的 alpha 状态。

【问题讨论】：

您是否尝试将您的template 包含在<div.container> 中？这样树看起来像<some-component> <div class="container"><aside><section> </div> </some-component>
@EricMartinez 我不能这样做，因为实际上来自路由器，所以完整的模板如下所示：

一些组件
-->
你不能在你的 HTML 中指定一个类？也许只需将.container 类添加到路由处理程序组件，并去掉额外的<div class="container">。将路由处理程序子类化或将 .container 放在内部模板中，就像 @EricMartinez 提到的那样似乎是解决这个问题的完全有效的方法。

标签： javascript css flexbox angular

【解决方案1】：

我通过向组件添加样式解决了这个问题。例如：

:host {
  display: flex;
}

:host {} 是关键。

【讨论】：

我不敢相信这里的时机，我已经为此努力了好几天。你是怎么想出来的？我希望我能为你的一生投票。
我找到了解决方案here。
说实话，我想知道是否有人甚至看到了这篇文章。我很高兴它对你有所帮助。
我也关注了一段时间，谢谢@Eggy
它是否适用于“普通”角芯，还是我必须包含其他东西？我试过这个但没有成功。页面的静态草图会做我想做的事，但只要我打开 Angular，一切都会中断。

【解决方案2】：

Angular 团队发布了自己的 flex-layout 包，不再需要自己写了：

https://github.com/angular/flex-layout

【讨论】：

【解决方案3】：

:host 选择器解决了这个问题，但你在许多组件中经常使用它。

我改用了以下全局 CSS：

.row > * {
  display: flex;
  flex-basis: 100%;
}

【讨论】：