如何仅覆盖第三方库中的组件并使用模板(html)，来自Angular 4中父组件的CSS

Question

如何在 Angular 4 中仅覆盖第三方库中的组件并使用模板、父组件中的 CSS？

1(在Angular中覆盖第三方库时是否必须覆盖模板和CSS？

2(它不是强制性的，然后给出如何覆盖的例子吗？

我在我的 angular 4 中使用此 lib ngx 轮播，我想从库组件覆盖特定方法，但不想覆盖 html 和 css？

Answer 1

也许指令可以做你想做的事。

就我而言，我想在不覆盖 html 模板的情况下对组件进行子类化。一个普通的子类需要一个新的 html 模板，但我想保留原来的 html 模板。

我使用了角核心的 Host 和 Self 指令来重新分配类的某些方法。效果类似于创建子类。

程序：

• 使用以下代码创建一个文件。我修改了primeng的日历组件，但当然，您可以修改另一个组件。
• 将类(在本例中为 MyCalendar(添加到 app.module.ts 中的声明部分，与任何其他组件相同。
• 将指令添加为 html 属性，在其中使用组件：<p-calendar myCalendar ...></...>

示例代码(使用 Angular 11。Angular 4 仍然受支持吗？

import {Directive, Host, Optional, Self} from "@angular/core";
import {Calendar} from "primeng/calendar";
@Directive({
    selector: '[myCalendar]',
})
export class MyCalendar {
    constructor(@Host() @Self() @Optional() public hostCalendar: Calendar) {
        hostCalendar.parseValueFromString = (text: string) => {
            return doSomething1(text);
        }
        hostCalendar.formatDateTime = (date: any) => {
            return doSomething2(date);
        }
    }
}