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

Question

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

1)是否强制覆盖模板和CSS，同时覆盖Angular中的第三方库？

2)它不是强制性的吗?然后举例说明如何重写？

我在我的angular 4中使用了这个库ngx-carousel，我想要覆盖来自库组件的特定方法，并且不想覆盖html和css？

Answer 1

也许directive可以做你想做的事情。

在我的例子中，我希望在不覆盖html模板的情况下实现一个组件的子类化。一个普通的子类需要一个新的html模板，但我想保留原始的html模板。

我使用了angular core中的Host和Self指令来重新分配类的某些方法。其效果类似于创建一个子类。

操作步骤：

• 使用以下代码创建一个文件。我修改了<p-calendar myCalendar ...></...>

的日历组件，当然，您也可以修改其他组件。

• 将类(在本例中为MyCalendar)添加到app.module.ts的声明部分，与任何其他组件相同。

• 将指令作为html属性添加到使用该组件的位置:primeng

示例代码(这使用了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);
        }
    }
}