javascript 将 flexbox 与 angular 2 组件一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33654980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using flexbox with angular 2 components
提问by Eggy
I want to update visual side(grid, colors) of my angular 2 application. Old layout was build with bootstrap 4, which I don't really need anymore. I decided to go for plain css3, and build grid with flexbox. I made a preview of this grid on codepen.
我想更新我的 angular 2 应用程序的可视侧（网格、颜色）。旧布局是使用 bootstrap 4 构建的，我真的不再需要它了。我决定使用纯 css3，并使用 flexbox 构建网格。我在 codepen 上预览了这个网格。
However implementation in project is hard and I am now stuck. Let's consider an example:
然而，在项目中实施很困难，我现在被卡住了。让我们考虑一个例子：
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 { }
If I bootstrap this component within, for example .containerI may get this result:
例如，如果我在其中引导此组件，.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>
As you can see the flex chain parent -> child is broken because of component "selector" between them. I menaged to fix this by adding styles: display: flex; width: 100%;to component selector from chrome dev tools, however I don't know how to make this work from code perspective nor is it the best way to do so.
正如您所看到的，由于它们之间的组件“选择器”，flex 链父 -> 子被破坏。我通过向display: flex; width: 100%;chrome 开发工具中的组件选择器添加样式来解决这个问题，但是我不知道如何从代码的角度进行这项工作，这也不是最好的方法。
I would really appreciate any help, because I have no idea how to fix this with the exception of not using flexbox.
我真的很感激任何帮助，因为除了不使用 flexbox 之外，我不知道如何解决这个问题。
I am using angular 2.0.0-alpha.44
我正在使用 angular 2.0.0-alpha.44
And yes, I am aware of angular's alpha state.
是的，我知道 angular 的 alpha 状态。
回答by Eggy
I fixed this issue by adding styles to component. For example:
我通过向组件添加样式来解决这个问题。例如：
:host {
display: flex;
}
:host {}was the key.
:host {}是关键。
回答by Philip
The angular team released their own flex-layout package, so you don't need to write it by your self anylonger:
angular 团队发布了自己的 flex-layout 包，不用再自己写了：
回答by Jiayi Hu
:hostselector solves the problem but you end using it very often in many components.
:host选择器解决了这个问题，但你最终在许多组件中经常使用它。
I used instead the following global CSS:
我改为使用以下全局 CSS：
.row > * {
display: flex;
flex-basis: 100%;
}
