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

Posted 2023-02-23

【中文标题】允许在角度组件之间共享 relative 和 flex

【英文标题】：Enabling relative and flex to be shared across angular components

【发布时间】：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 中这有帮助吗？ - 编辑所有现代版本的浏览器。

不妨看看***.com/questions/49083777/…

对于external-component css，您可能需要 css 选择器为 :host 而不是 .external

【参考方案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;