ค้นหาเว็บไซต์

typescript - โหลดคอมโพเนนต์แบบไดนามิกจาก JSON และแสดงผลใน HTML


ฉันมีไฟล์ JSON ที่มีคอมโพเนนต์ Angular แบบกำหนดเอง สิ่งที่ฉันต้องการทำคือสามารถดึงเนื้อหาจาก JSON นั้นและแสดงมัน

ตัวอย่าง JSON

{
"contentContainer": {
    "contentList": {
        "Home_Div_1": {
            "refId": "Home_Div_1",
            "content": "<title-component> Hi there </title-component>"
        },
        "Home_Div_2": {
            "refId": "Home_Div_2",
            "content": "<desc-component> Description section </desc-component>"
        }
    }
}

}

ดังนั้นหน้า HTML ควรเป็นแบบนี้

 <title-component> Hi there </title-component>
<desc-component> Description section </desc-component>

[การใช้สไตล์ระดับส่วนประกอบทั้งหมด ฯลฯ]

ฉันได้ลองใช้ inner HTML กับตัวกรอง DOM แล้วซึ่งทำงานได้ดีถ้าใช้แค่แท็ก HTML แต่ไม่สามารถใช้กับคอมโพเนนต์ Angular แบบกำหนดเองได้ ปัญหาคือสตริงที่ดึงมาจาก JSON ต้องถูกแปลงและแสดงเป็นคอมโพเนนต์ Angular แบบกำหนดเองเหมือนกับว่าไม่ได้มาจาก JSON แต่เป็นโมดูลเอง ฉันได้ลองแล้ว - แต่ปัญหาคือเราจะไม่ได้รับ HTML แต่ได้รับเป็นสตริง

มือใหม่ที่นี่ การได้รับความช่วยเหลือในทิศทางที่ถูกต้องจะเป็นประโยชน์