使用具有 angular 2 个组件的 flexbox

Question

我想更新我的 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 { }

如果我 bootstrap 这个组件在里面，例如 .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>

如您所见，弹性链 parent -> child 由于它们之间的组件 "selector" 而损坏。我设法通过添加样式来解决此问题：display: flex; width: 100%; 到 chrome 开发工具中的组件选择器，但是我不知道如何从代码的角度进行这项工作，也不是最好的方法。

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

我正在使用 angular 2.0.0-alpha.44

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

Answer 1

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

:host {
  display: flex;
}

:host {} 是关键。

Answer 2

angular团队发布了自己的flex-layout包，以后不用自己写了：

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

Answer 3

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

我改用了以下全局 CSS:

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

使用具有 angular 2 个组件的 flexbox

Using flexbox with angular 2 components

javascript

css

flexbox

angular