Angular 将类应用于组件的子元素

我使用的是ng bootstrap，但是这个问题可以推广

假设我有一个包含这段html的组件：

<ngb-alert type="danger" class="py-2 mt-3">This is an alert</ngb-alert>

渲染后，我得到：

<ngb-alert _ngcontent-c3="" class="py-2 mt-3" type="danger" ng-reflect-type="danger">
    <div role="alert" class="alert alert-danger alert-dismissible">
        <!--bindings={"ng-reflect-ng-if": "true"}-->
        <button aria-label="Close" class="close" type="button">
            <span aria-hidden="true">×</span>
        </button>
        This is an alert
    </div>
</ngb-alert>

如您所见，当然py-2 mt-3类应用于元素，而我想将它们应用于元素

---

由于通常没有访问第三方组件实现的权限，如何实现将类应用于子元素？这是css可以做到的吗

您只需在ngb警报组件中添加一个输入属性即可。 然后在调用组件时，将值传递给该输入。在component类中，您可以使用它来执行任何您想要的操作。下面是如何执行该操作的基本示例

<div role="alert" class="alert alert-danger alert-dismissible {{myClass}}">
    <button aria-label="Close" class="close" type="button">
        <span aria-hidden="true">×</span>
    </button>
    This is an alert
</div>


import { Input } from '@angular/core';
export class ngbAlertComponent {
    @Input() myClass : string;
}


<ngb-alert type="danger" myClass="{{'py-2 mt-3'}}">This is an alert</ngb-alert>

编辑2

您也可以使用纯css执行此操作。这是我从本模块的github回购协议中得到的建议

<ngb-alert class="myclass"></ngb-alert>
ngb-alert.myclass > div { your-css-here }

---

谢谢，这肯定是我自己组件的首选方式。但是第三方库呢？在本例中，ngb警报是官方图书馆ng引导程序的一个组件。我真的应该为他们的源代码定制版本来实现这一点吗？我想是的。我将申请回购并提出提货请求。我将添加一个选项，允许用户添加自定义类。我将更新我的答案与回购链接和拉一个太。但现在我建议你用这种方式创造你自己的。或者你可以使用纯javascript来添加你想要的类，尽管我认为可能有其他的解决方案，可能是css，但它还是很有效的？将类应用于第三方组件而不必弄乱它们的代码。无论如何谢谢你！

<ngb-alert class="myclass"></ngb-alert>
ngb-alert.myclass > div { your-css-here }