使用flexbox和angular 2组件 [英] Using flexbox with angular 2 components
问题描述
我想更新我的angular 2应用程序的视觉侧（网格，颜色）。旧布局是用bootstrap 4构建的，我不再需要了。我决定去简单的css3，和flexbox构建网格。 我在codepen上预览了此网格。
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.
然而在项目中的实施是困难的，我现在卡住了。让我们考虑一个例子：
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 { }
如果我引导这个组件，例如 .container 我可能得到这个结果：
If I bootstrap this component within, for example .container I may get this result:
<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 chain parent - > child因为组件selector 。我考虑通过添加样式来修复这个问题： display：flex; width：100％; 到chrome开发工具的组件选择器，但是我不知道如何从代码的角度看这个工作，也不是最好的方法。
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.
我真的很感谢任何帮助，因为我不知道如何解决这个问题，但不使用flexbox。
I would really appreciate any help, because I have no idea how to fix this with the exception of not using flexbox.
使用角度2.0.0-alpha.44
I am using angular 2.0.0-alpha.44
是的，我知道角度的alpha状态。
And yes, I am aware of angular's alpha state.
推荐答案
我通过添加样式到组件修复了这个问题。例如：
I fixed this issue by adding styles to component. For example:
:host {
display: flex;
}
：host {} 是关键。
这篇关于使用flexbox和angular 2组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
