允许在角度组件之间共享 relative 和 flex答案

【问题标题】：Enabling relative and flex to be shared across angular components允许在角度组件之间共享 relative 和 flex
【发布时间】：2019-04-12 08:58:30
【问题描述】：

所以我有一个这样的组件；

HTML

<div class="flex-container"> 
<external-component></external-component>
</div>

CSS

.flex-container{
height: 100vh;
width: 100vw;
display: flex;
position: relative;
}

外部组件的 CSS

.external{
flex: 1 1 50%;
height: 20vh;
background-color:black;
}

这不起作用，但它不会显示任何内容，我假设由于某种原因外部组件似乎没有从父元素继承。

任何解决此问题的方法都很棒。

【问题讨论】：

你能描述一下你的文件结构吗？想看看你是如何组织和导入组件的。
原因是flex 仅适用于立即孩子，因此external-component 中的任何内容都不再是直接孩子。您需要支持哪些浏览器？
理想情况下，所有浏览器都会很棒，并且文件结构是您的标准 Angular 6/7 结构我使用 ng gc 生成所有内容 ...。如果这个特定组件位于 app.component.html 中这有帮助吗？ - 编辑所有现代版本的浏览器。
不妨看看stackoverflow.com/questions/49083777/…
对于external-component css，您可能需要 css 选择器为 :host 而不是 .external

标签： css angular sass angular6 angular2-components

【解决方案1】：

要么将app.component.html 中的css 类external 添加到<external-component/>，并将外部样式移动到app.component.css，或者将类.external 重命名为:host。或者将所有这些样式移到styles.css（不限于任何特定组件）。

所以，解决方案 1：

<div class="flex-container"> 
  <external-component class="external"></external-component>
</div>

那个，样式都在app.component.css中。

解决方案 2，external.component.css：

.external{
  flex: 1 1 50%;
  height: 20vh;
  background-color:black;
}

【讨论】：