Question

我正在使用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类应用于<nbg-alert>元素，而我想将它们应用于<div>元素。

由于通常无权访问第三方组件，因此如何实现将类应用于sub元素？ CSS可以做些什么吗？

Answer 1

您只需要在ngb-alert组件内添加Input（）属性。然后，当您调用组件时，会将值传递给该输入。在组件类中，您可以使用use来做您想做的任何事情。以下是如何执行该操作的基本示例。

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

编辑1

使用模块时。我做了一个叉子，并更新了警报组件。您应该能够添加自定义类。这是回购链接npm install https://github.com/ulrichdohou/ng-bootstrap

您可以通过yarn add git+https://git@github.com/ulrichdohou/ng-bootstrap.git

的方式安装yarn

不确定如何使用npm 现在，您可以通过这种方式使用组件

<ngb-alert type="danger" customClass="{{'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 }

将类应用于组件的子元素

1 个答案: