javascript - Angular 5: การสร้างคอมโพเนนต์หลักด้วยเทมเพลตภายนอกและการแทนที่ส่วนภายใน

ฉันกำลังพยายามสร้างคอมโพเนนต์หลักบางประเภทที่ให้ลักษณะและตรรกะแบบทั่วไปสำหรับคอมโพเนนต์ทั้งหมดของฉัน แต่ฉันสามารถเขียนตรรกะและเทมเพลตเฉพาะภายในนั้นได้

ดูภาพเหล่านี้:

คอมโพเนนต์ทั้งสองนี้มีลักษณะที่เหมือนกัน: ส่วนบนที่มีชื่อเรื่องและปุ่ม "ซ่อน/แสดง" และจากนั้นก็จะมี "ตัวเนื้อหา" ที่แตกต่างกันระหว่างทั้งสอง นอกจากนี้พวกเขายังมีปุ่มแก้ไขร่วมกัน ดังนั้นไอเดียของฉันคือการทำให้ส่วน "ตัวเนื้อหา" นั้นเป็นแบบไดนามิกอย่างสมบูรณ์: นั่นคือส่วนของคอมโพเนนต์ที่ฉันต้องการแทนที่ด้วยคอมโพเนนต์การดำเนินการของฉันเอง.

อีกนัยหนึ่ง: ฉันต้องการสร้าง abstract class ด้วย Typescript ที่มีแม่แบบ: สี่เหลี่ยม, ส่วนหัวและเนื้อหา, ชื่อเรื่อง (ซึ่งฉันต้องการแทนที่จาก subclass)... และจากนั้น, "เนื้อหา" จะถูกเติมด้วยแม่แบบที่ subclass จัดหาให้.

นี่สามารถทำได้อย่างไรใน Angular? จนถึงตอนนี้ฉันได้เห็นเพียงวิธีการแทนที่เทมเพลตของคอมโพเนนต์พาเรนต์ทั้งหมด ไม่ใช่การเสริมกันและกัน ฉันเดาว่าต้องมีวิธีการแทรกโค้ด HTML พร้อมไดเร็กทีฟของ Angular ภายในคอมโพเนนต์...

เรื่องมันคือ อันไหนกันแน่?

ขอบคุณ!

คำตอบ #1

สมมติว่าคุณตั้งชื่อคอมโพเนนต์ของคุณว่า CardComponent และตัวเลือกของคุณคือ app-card

สำหรับหัวข้อ

คุณสามารถใช้ตัวตกแต่งคอมโพเนนต์ @Input() เพื่อรับสตริงชื่อเรื่องและใช้ใน CardComponent ทั่วไปของคุณ ดูเอกสาร Angular ได้ที่: https://angular.io/guide/component-interaction

สำหรับร่างกาย:

คุณสามารถสร้างคอมโพเนนต์ของคุณที่มีส่วนหัวและปุ่มแก้ไข จากนั้นใช้แท็ก <ng-content> เพื่อรับสิ่งที่อยู่ภายในตัวเลือกคอมโพเนนต์ได้ เช่น:

<h2>{{title}}</h2>
<ng-content></ng-content>
<button>Edit</button>

ดังนั้นคุณสามารถใช้คอมโพเนนต์การ์ดของคุณได้ดังนี้:

<app-card [title]="Channel select">
    <!-- Insert your body html -->
</app-card>

ป.ล.: เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ ng-content ดูที่นี่: https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b