html - Angular2 组件标签破坏了 flexbox 布局

Question

我正在使用纯 HTML5 和 CSS3 为客户端构建 Web 应用程序的前端，并使用 flexbox 进行布局。我完成了第一页并将其发送给客户。他将一些代码包装在 Angular2 组件标签中，但布局中断了。

这是问题的一个例子:

原始布局:https://jsfiddle.net/starbreaker/jrqbhsuq/

HTML:

<div class="wrapper">

  <div class="child first">
    <h1>Some content</h1>
  </div>

  <div class="child second">
    <h1>Some more content</h1>
    <p>Help me if you can, I'm feeling down
       And I do appreciate you being 'round
       Help me get my feet back on the ground
       Won't you please, please help me
    </p>
    <p>When I was younger so much younger than today
       I never needed anybody's help in any way
       (But) But now these days are gone (These days are gone), I'm not so self assured
       (I know I've found) Now I find I've changed my mind and opened up the doors
      </p>
  </div>

</div>

CSS:

.wrapper {
  display: flex;
}

.child {
  background-color: yellow;
  padding: 0 1em;
  flex: 1;
}

.first {
  display: flex;
  align-items: center;
  background-color: #F6CEF5;
}

.second {
  background-color: #CEF6CE;
}

他将第一个和第二个子 div 包装在 Angular2 组件标签中并得到了这个: https://jsfiddle.net/starbreaker/1c15q243/

我明白发生了什么——这些新添加的 Angular2 标签变成了 flex-items 而不是原来的标签并破坏了一切。客户端说“这些 Angular 标签被浏览器忽略了”，但显然这里不是这样。

他还说“我不能完全控制插入的额外标签。因此设计/css 必须能够处理额外的非 html 元素(浏览器通常会忽略这些元素)。”

我尝试将内联样式应用于这些新的 Angular 标记(基本上是从 div 向它们添加样式)并且它解决了问题，但这显然不是一个很好的解决方案并且不可扩展。

我发现此处描述的类似问题:Using flexbox with angular 2 components

不幸的是，我对 Angular 的经验为零，不知道如何根据这个问题实现解决方案。

那么，是否可以通过某种方式仅在 CSS/HTML 中修复此问题？

稍后编辑:

我在许多具有不同 css 属性的地方使用 flexbox，并且事先不知道将插入什么 Angular 标记以及插入何处，因此在 CSS 中重新设置它们似乎不是一个好的解决方案...

Answer 1

你的组件必须是 flex parent，所以你要么在组件装饰器中使用 styles/stylesUrl 属性，要么简单地在 css 中为你的组件设置样式

// component decorator styles property
:host {
  display: flex;
}

// external css
your-component-selector {
  display: flex;
}

https://jsfiddle.net/1c15q243/2/