Question

我想更新我的角度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>

正如您所见，柔性链父母 - ＆gt;由于组件＆＃34;选择器＆＃34;它们之间。我通过向chrome dev工具中的组件选择器添加样式display: flex; width: 100%;来解决这个问题，但是我不知道如何从代码角度进行这项工作，也不是最好的方法。

我真的很感激任何帮助，因为除了不使用flexbox之外我不知道如何解决这个问题。

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

是的，我知道有角度的阿尔法状态。

Answer 1

我通过向组件添加样式来解决此问题。例如：

:host {
  display: flex;
}

:host {}是关键。

Answer 2

有角度的团队发布了自己的flex-layout软件包，所以你不需要自己编写它了：

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

Answer 3

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

我使用了以下全局CSS：

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

使用带有角度2分量的flexbox

3 个答案: