Question

我有以下Angular组件

<div id="content-div">
  <router-outlet></router-outlet>
</div>

我在上面的div中放置了不同的组件。我的要求是所有此类组件都应具有css规则height:100%。我尝试使用>* css而不是重复此代码，但这并不起作用。

#content-div >* { 
  height:100%;
}

>*不能跨组件工作吗？如何让子组件从其父组件中获取css规则？

Answer 1

默认情况下，Angular封装CSS。如果要禁用此功能，则需要在组件设置中执行此操作

@Component({
  selector: 'app-child-component',
  template: `<div class="parent-class">Child Component</div>`,
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

Answer 2

您需要以下一种方式执行此操作：

但是你不应该xml2::read_html它是非常重和慢的选择器，最好将自己限制在更具体的东西，比如容器上的类或至少有一些标签。

Answer 3

不得不改变方法。使用>*而不是css-grid。有效。

#content-div{
  height:100%;
  display:flex;
  align-items: center;
  justify-content: center;
}

`＆gt; *`选择器无法从父组件到子组件

3 个答案: