相关疑难解决方法(0)

如何从父组件的CSS文件设置子组件的样式?

我有一个父组件:

<parent></parent>
Run Code Online (Sandbox Code Playgroud)

我想用子组件填充这个组:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>
Run Code Online (Sandbox Code Playgroud)

父模板:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>
Run Code Online (Sandbox Code Playgroud)

儿童模板:

<div class="child">Test</div>
Run Code Online (Sandbox Code Playgroud)

由于parentchild是两个单独的组件,他们的风格被锁定在他们自己的范围.

在我的父组件中,我尝试过:

.parent .child {
  // Styles for child
}
Run Code Online (Sandbox Code Playgroud)

.child样式没有应用于child组件.

我尝试使用styleUrlsparent样式表包含在child组件中以解决范围问题:

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]
Run Code Online (Sandbox Code Playgroud)

但这并没有帮助,也尝试了另一种方式,即取出child样式表,parent但这也无济于事.

那么如何设置包含在父组件中的子组件的样式?

css angular-components angular

223
推荐指数
12
解决办法
15万
查看次数

用什么代替:: ng-deep

我正在尝试将路由器出口放置的元素设置为有角度,并且要确保生成的元素的宽度为100%

从大多数回复中,我看到我应该使用::ng-deep选择器,但是从Angular的文档中它被弃用了.有替代品::ng-deep吗?

html css angular

53
推荐指数
4
解决办法
2万
查看次数

标签 统计

angular ×2

css ×2

angular-components ×1

html ×1