Angular 5 - โหลดโมดูล (ที่ไม่รู้จัก ณ เวลาคอมไพล์) แบบไดนามิก ณ รันไทม์

ถึงแม้ว่าจะมีความซับซ้อน แต่คุณสามารถลองได้ ฉันเดาว่าขึ้นอยู่กับฐานรหัสของคุณ เราเตอร์แสดงคุณสมบัติ config เก็บการกำหนดค่าปัจจุบันไว้ และวิธี resetConfig(routes: Routes) สำหรับการรีเซ็ตการกำหนดค่า คุณสามารถเริ่มต้นจากตรงนั้น และเพิ่มส่วนประกอบต่างๆ ได้ทันที

แม้ว่าส่วนประกอบต่างๆ จะต้องเข้าถึงได้ อาจสร้างขึ้นแบบไดนามิกดังที่กล่าวไว้ในคำตอบอื่น ๆ หรืออีกทางหนึ่ง การกำหนดค่าของคุณอาจมีดังนี้:

constructor(private router: Router) {}

private addPlugin(routePath, pluginName, pluginPath) {
    const currentConfig = this.router.config;
    currentConfig.push({
        path: routePath,
        loadChildren: `precompiled-modules/${pluginPath}#${pluginName}`,
    });
    this.router.resetConfig(currentConfig);
}

คุณจะต้องได้รับ PluginPath และ PluginName ด้วยวิธีใดวิธีหนึ่ง - อาจคำนวณตามแบบแผน อาจเป็นผู้ช่วยแบ็กเอนด์ของ Lil ที่ได้รับสิ่งนี้ อาจมีอาร์เรย์ของอาร์เรย์ที่กำหนดค่าไว้ล่วงหน้าและโหลดแล้วหรือคล้ายกัน ฉันยังถือว่าคุณจะมีระบบทดสอบที่ดีจริงๆ เพื่อให้แน่ใจว่าปลั๊กอินของคุณ "เข้ากันได้" และสุดท้าย สอน webpack/systemjs ถึงวิธีเตรียมโมดูลให้พร้อม โดยรวมแล้วมันไม่ใช่เรื่องที่เป็นไปไม่ได้ แต่มันต้องมีรากฐานบางอย่าง

ดังที่กล่าวไปแล้ว Angular 6 ใกล้เข้ามาแล้ว และด้วยองค์ประกอบเชิงมุม Elements จะให้วิธีการรวบรวมโมดูลของคุณเป็นส่วนประกอบของเว็บและ "ส่งออก" เพื่อให้สามารถใช้งานได้ทุกที่ (ไม่จำเป็นในแอป Angular) ลองนึกถึงปลั๊กอิน jQuery - มีฐาน jQuery.min.js ที่คุณต้องโหลด แต่นอกเหนือจากนั้น คุณไม่คิดถึงมันอีกต่อไป คุณเพียงแค่ใช้องค์ประกอบใหม่ของคุณ มันคล้ายกับ Angular Elements - คุณส่งออกสิ่งที่เป็นส่วนประกอบของเว็บโดยพื้นฐาน มีส่วน "ตัวโหลด" (เทียบเท่า jquery.min.js) และชุดองค์ประกอบของคุณ แต่ส่วนประกอบของคุณก็เป็นเพียงโหนด HTML อื่น ที่มีคุณสมบัติ แอตทริบิวต์ การเชื่อมโยง เหตุการณ์ คุณจะไม่สนใจอีกต่อไป เช่นเดียวกับที่คุณไม่ได้สนใจอินพุต

มันอาจจะคุ้มค่ากับการรอคอย ลองดูและตัดสินใจด้วยตัวเอง

คุณสามารถดูการโหลดส่วนประกอบแบบไดนามิก: https://angular.io/guide/dynamic-component-loader

ช่วยให้คุณสามารถเพิ่มส่วนประกอบแบบไดนามิกขณะรันไทม์ได้