我有一个父组件:

<parent></parent>

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

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

父模板:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

子模板:

<div class="child">Test</div>

由于父组件和子组件是两个独立的组件,它们的样式被锁定在自己的范围内。

在我的父组件中,我尝试这样做:

.parent .child {
  // Styles for child
}

但是.child样式没有应用到子组件。

我尝试使用styleUrls将父组件的样式表包含到子组件中,以解决范围问题:

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

但这并没有帮助,我还尝试了另一种方法,将子样式表取到父样式表中,但这也没有帮助。

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


当前回答

要在子组件中为元素的类赋值,可以在子组件中使用@Input字符串,并将其用作模板中的表达式。下面是我们在共享Bootstrap加载按钮组件中更改图标和按钮类型的示例,而不影响它在整个代码库中的使用方式:

app-loading-button.component.html(孩子)

<button class="btn {{additionalClasses}}">...</button>

app-loading-button.component.ts

@Input() additionalClasses: string;

parent.html

<app-loading-button additionalClasses="fa fa-download btn-secondary">...</app-loading-button>

其他回答

截至目前(Angular 9), Angular使用Shadow DOM将组件显示为自定义HTML元素。为这些自定义元素设置样式的一种优雅方法可能是使用自定义CSS变量。下面是一个通用的例子:

class ChildElement extends HTMLElement { constructor() { super(); var shadow = this.attachShadow({mode: 'open'}); var wrapper = document.createElement('div'); wrapper.setAttribute('class', 'wrapper'); // Create some CSS to apply to the shadow dom var style = document.createElement('style'); style.textContent = ` /* Here we define the default value for the variable --background-clr */ :host { --background-clr: green; } .wrapper { width: 100px; height: 100px; background-color: var(--background-clr); border: 1px solid red; } `; shadow.appendChild(style); shadow.appendChild(wrapper); } } // Define the new element customElements.define('child-element', ChildElement); /* CSS CODE */ /* This element is referred as :host from the point of view of the custom element. Commenting out this CSS will result in the background to be green, as defined in the custom element */ child-element { --background-clr: yellow; } <div> <child-element></child-element> </div>

从上面的代码中可以看到,我们创建了一个自定义元素,就像Angular为每个组件所做的那样,然后我们从全局作用域覆盖自定义元素阴影根中的背景颜色变量。

在Angular应用中,这可能是这样的:

parent.component.scss

child-element {
  --background-clr: yellow;
}

child-element.component.scss

:host {
  --background-clr: green;
}

.wrapper {
  width: 100px;
  height: 100px;
  background-color: var(--background-clr);
  border: 1px solid red;
}

因为/deep/、>>>和::ng-deep都已弃用。 最好的方法是在子组件样式中使用以下方法

:host-context(.theme-light) h2 {
  background-color: #eef;
}

这将在子组件的任何祖先中查找主题光。 查看文档:https://angular.io/guide/component-styles#host-context

要在子组件中为元素的类赋值,可以在子组件中使用@Input字符串,并将其用作模板中的表达式。下面是我们在共享Bootstrap加载按钮组件中更改图标和按钮类型的示例,而不影响它在整个代码库中的使用方式:

app-loading-button.component.html(孩子)

<button class="btn {{additionalClasses}}">...</button>

app-loading-button.component.ts

@Input() additionalClasses: string;

parent.html

<app-loading-button additionalClasses="fa fa-download btn-secondary">...</app-loading-button>

随着互联网的更新,我想到了一个解决方案。

首先是一些警告。

还是不要这么做。澄清一下,我不打算让子组件允许您对它们进行样式设置。SOC。如果你作为组件设计者想要允许这一点,那么你就拥有了更多的权力。 如果你的孩子没有生活在阴影中,那么这对你来说就行不通了。 如果你必须支持一个浏览器,不能有一个影子dom,那么这也不会为你工作。

首先,将子组件的封装标记为shadow,以便它在实际的shadow dom中呈现。其次,将part属性添加到希望允许父元素设置样式的元素中。在父组件样式表中,可以使用::part()方法进行访问

我希望通过以下方式实现这一目标:

使用@Component将css类添加到宿主元素,并将封装设置为none。然后在组件style.css.scss中引用添加到宿主的类,这将允许我们声明只影响我们自己和我们类范围内的子类的样式。初版

@Component({
  selector: 'my-component',
  templateUrl: './my-component.page.html',
  styleUrls: ['./my-component.page.scss'],
  host: {
    class: 'my-component-class'
  },
  encapsulation: ViewEncapsulation.None
})

结合下面的CSS (my-component.page.scss)

// refer ourselves so we are allowed to overwrite children but not global styles
.my-component-class {
  // will effect direct h1 nodes within template and all h1 elements within child components of the 
  h1 {
    color: red;
  }
}
// without class "scope" will affect all h1 elements globally
h1 {
  color: blue;
}