typescript - Angular 4でサードパーティライブラリのコンポーネントのみをオーバーライドし、親コンポーネントのテンプレート（HTML）、CSSを使用する方法

Angular 4でサードパーティライブラリのコンポーネントのみをオーバーライドし、親コンポーネントのテンプレートやCSSを使用するにはどうすればよいですか？

1) Angularでサードパーティのライブラリをオーバーライドする際に、テンプレートやCSSをオーバーライドすることは必須ですか？

2) それでは、オーバーライドの方法の例を示すことは必須ではないのですか？

私はAngular 4でこのライブラリngx-carouselを使用しており、ライブラリコンポーネントの特定のメソッドだけをオーバーライドしたく、HTMLやCSSはオーバーライドしたくありません。

回答 #1

おそらく、指示があなたの望むことを実行できるでしょう。

私の場合、HTMLテンプレートをオーバーライドせずにコンポーネントをサブクラス化したいと思いました。通常のサブクラス化では新しいHTMLテンプレートが必要ですが、私は元のHTMLテンプレートを保持したかったのです。

私は Angular コアの Host および Self ディレクティブを使用して、クラスの特定のメソッドを再割り当てしました。その効果はサブクラスを作成するのと似ています。

手順：

• 次のコードでファイルを作成してください。私はprimengのカレンダーコンポーネントを変更しましたが、もちろん、別のコンポーネントを変更することもできます。
• app.module.ts の declarations セクションにクラス（この例では MyCalendar）を、他のコンポーネントと同じように追加します。
• コンポーネントを使用する場所にディレクティブを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);
        }
    }
}