使相对构件和弯曲构件能够在角度构件之间共享

Question

所以我有一个类似的组件；

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;
}

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

任何解决办法都将是美妙的。

Answer 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;
}