Angular2 组件标签破坏了 flexbox 布局

Posted 2023-03-06

【中文标题】Angular2 组件标签破坏了 flexbox 布局

【英文标题】：Angular2 component tags break flexbox layout

【发布时间】：2017-01-16 19:46:18

【问题描述】：

我正在为纯 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 标签变成了弹性项目，而不是原来的标签，破坏了一切。客户说“浏览器会忽略这些角度标签”，但这里显然不是这种情况。

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

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

我发现这里描述的类似问题：Using flexbox with angular 2 components

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

那么，是否有可能仅在 CSS/HTML 中以某种方式解决此问题？

后期编辑：

我在很多地方都使用了具有不同 css 属性的 flexbox，并且事先不知道将插入什么 Angular 标签以及在哪里插入，所以在 CSS 中重新设置它们似乎不是一个好的解决方案...

【问题讨论】：

问题是添加这些额外的标签会阻止你的 .child 元素成为弹性项目，因为角度标签现在是弹性项目。您的子元素现在是孙子元素。您可以做的是使用 css 选择器将新的角度标签也转换为 flex 容器。类似.wrapper > *，但我不是这方面的专家。 demo，可能有更好的解决方案。

@RicardoRuiz，感谢您的建议！这是一个好主意并且适用于这种特殊情况，但如果有很多这样的标签被插入到不同的地方，不仅在“.wrapper”下而且并不总是作为弹性项目，那么你的解决方案将无济于事......

【参考方案1】：

您的组件必须是 flex 父组件，因此您可以在组件装饰器中使用 styles/stylesUrl 属性，或者只需在 css 中为您的组件设置样式

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


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

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

【讨论】：

感谢您的回答！我看到我可以像任何其他标签一样在 CSS 中设置这些 Angular 标签的样式，但是我在许多具有不同 css 属性的地方使用 flexbox，并且事先不知道将插入哪些 Angular 标签以及在哪里插入，所以在 CSS 中重新设置它们的样式并不'似乎不是一个好的解决方案......