typescript - วิธีการแทนที่เฉพาะคอมโพเนนต์จากไลบรารีของบุคคลที่สามและใช้เทมเพลต (html) และ CSS จากคอมโพเนนต์หลักใน Angular 4

วิธีการ override เฉพาะคอมโพเนนต์จากไลบรารีภายนอกและใช้เทมเพลต, CSS จากคอมโพเนนต์แม่ใน Angular 4?

1) จำเป็นต้อง override แม่แบบและ CSS หรือไม่ ในขณะที่ override ไลบรารีของบุคคลที่สามใน Angular?

2) งั้นมันไม่บังคับใช่ไหม แล้วให้ตัวอย่างเช่น วิธีการ override อย่างไร?

ฉันกำลังใช้ไลบรารีนี้ ngx-carousel ใน Angular 4 ของฉันและฉันต้องการแทนที่บนเมธอดเฉพาะจากคอมโพเนนต์ของไลบรารีและไม่ต้องการแทนที่ HTML และ CSS

คำตอบ #1

บางทีคำสั่งอาจทำสิ่งที่คุณต้องการได้

ในกรณีของฉัน ฉันต้องการสร้างซับคลาสของคอมโพเนนต์ โดยไม่ต้องเขียนทับเทมเพลต HTML ของเดิม ซับคลาสปกติจะต้องมีเทมเพลต HTML ใหม่ แต่ฉันต้องการเก็บเทมเพลต HTML เดิมไว้

ฉันใช้คำสั่ง Host และ Self จาก angular core เพื่อมอบหมายวิธีการบางอย่างของคลาสใหม่ ผลลัพธ์จะคล้ายกับการสร้างคลาสลูก

ขั้นตอน:

• สร้างไฟล์ด้วยโค้ดต่อไปนี้ ฉันได้แก้ไขคอมโพเนนต์ปฏิทินของ 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);
        }
    }
}