Angular: تحميل قالب ديناميكي للمكون

لماذا لا يكون لديك مكونان فقط ثم يتم تحميلهما على كل ما يتوافق مع الموقف الذي تحتاجه. على سبيل المثال: AdminDisplayComponent و NotAdminDisplayComponent ؟.
لا يمكن جعل القوالب ديناميكية ، يجب ربط القالب بمكون

أعلم أن القالب لا يمكن أن يكون ديناميكيًا في الوقت الحالي وهذا أمر مزعج كما أوضحت. لا أريد تطبيق مكونين أو أكثر أو مئات من المكونات بنفس المنطق.
لهذا السبب أطلب هذه الميزة!

KarlXOL ما أعنيه بأنه غير ممكن هو أنه سيكون من المستحيل جعله ديناميكيًا دون كسر AOT.
بالنسبة لحل مشكلتك ، إذا كنت ترغب في مشاركة رمز مشترك ، فلماذا لا تستخدم الخدمة؟ أو إذا كنت لا تعتقد أن الخدمة ستصنع مكونًا ، فسترث منه

DzmitryShylovich : أعلم أنك لا تريد تقديم هذه الميزة. ولكن بينما حاولت شرح جميع الطرق الأخرى للقيام بذلك ، فإن العكازات ليست عملية.
إذا قمت بذلك باستخدام ميزات الزاوية ، فيجب علي أيضًا استخدام المترجم الذي يكسر أيضًا قدرة AOT. حق؟ وماذا في ذلك.
من فضلك ، لا تكن دوغمائيًا وأعد التفكير في نهجك. أنا / نحن نقدم الحلول وأحتاج إلى منصة تدعمنا في القيام بذلك.

Toxicable : إذا كان لديك مثال على كيفية تغليف وظائف CRUD في إحدى الخدمات ، على سبيل المثال ، أود رؤيته. حتى لو كان هذا ممكنا ، هناك حاجة للتنفيذ لكل منتج ، على سبيل المثال ، مكون.

KarlXOL لا أفهم لماذا لا يمكن تنفيذ وظيفة CRUD كخدمة. ربما تكون أفضل طريقة للقيام بذلك ونمط شائع.

إذا فهمت بشكل صحيح أنك لا تهتم بـ AOT على الإطلاق وتريد أن تفعل كل شيء في وضع JIT مع تحميل وحدة المترجم في وقت التشغيل. ثم يمكنك القيام بذلك الآن. ابحث عن eaxmple على https://www.ag-grid.com/ag-grid-angular-aot-dynamic-components ، https://eyalvardi.wordpress.com/2016/09/04/injecting-components-in -وقت التشغيل أو حتى http://blog.assaf.co/angular-2-harmony-aot-compilation-with-lazy-jit-2.

@ mlc-mlapis: بالطبع عمليات البيانات الفعلية (جديدة ، محدثة ، إلخ) في الخدمة. ولكن يتم تشغيلها من خلال تفاعلات المستخدم (انقر ، ...) والتي تعد جزءًا من أحد المكونات.

الرابط الذي تشير إليه ، يوضح فقط كيفية التعامل مع مكونات متعددة. وهذه هي النقطة ، لا أريد أن يكون لدي عدة مكونات للأحمر ، والأخضر ، والأزرق. أنا فقط بحاجة إلى مكون واحد وتغيير القالب / التخطيط. لقد أوضحت السبب في طلب الميزة الخاص بي

KarlXOL لكن هذا المثال هو بالضبط ما تريده ، نعم أم لا (لفهم وجهة نظرك)؟ https://eyalvardi.wordpress.com/2016/09/04/injecting-components-in-runtime

صحيح ، النقرات ، ... موجودة ولكن لا تفهم سبب ذكرها لأن مكوناتك تحقن الخدمة من خلال DI (يجب أن تكون مفردة) وستوفر واجهة ضرورية.

بالطبع عمليات البيانات الفعلية (جديدة ، محدثة ، إلخ) في الخدمة. ولكن يتم تشغيلها من خلال تفاعلات المستخدم (انقر ، ...) والتي تعد جزءًا من أحد المكونات.

@ mlc-mlapis هذا أحد الحلول الممكنة التي أشير إليها في طلبي ("أداة تحميل المكونات الديناميكية"). الجانب السلبي لهذا النهج
1) يتطلب الأمر سطورًا إضافية من التعليمات البرمجية لكل مكون يحتوي على محتوى ديناميكي
2) يحتاج إنشاء الوحدة الديناميكية إلى تكييف (الواردات) لجعلها تعمل (التوجيهات)
نتيجة لذلك ، لديك وحدة ديناميكية ذات عبء كبير أو تقوم بتنفيذ العديد من أدوات إنشاء الوحدات الديناميكية

باختصار ، هذا الحل هو الوزن الثقيل ، والمستوى المنخفض للغاية ، والمخاطرة التي يحتاجها المعرف للتكيف مع تطور الزاوي ، ... وهو ليس منافسًا للنهج الهزيل والسريع الذي توفره Angular 1 لهذا المطلب.
فقط تخيل أنك تريد تقديم "عنوان" مختلف للمستخدمين الذين ينتمون إلى أقسام مختلفة لإعطاء مجرد مثال بسيط.

لهذا السبب أطلب الميزة لتغيير / تحميل القالب بسرعة. يجب أن يتعامل الإطار مع هذه العناصر منخفضة المستوى ، وليس تطبيق الأعمال.

من الواضح الآن ما تعنيه. يمكنني تخيل هذا النوع من التبسيط والحصول على مستوى عالٍ من الوظائف. من الضروري أيضًا أن نقول إن هذا سيكون مقيدًا بشكل صارم فقط لوضع JIT.

في الواقع ، لا يوجد أي attribute في Angular والذي من شأنه أن يميز وظائفه بين وضعي JIT و AOT. هناك stable ، experimental ، depreciated .

سؤال آخر هو أولوية هذه الوظيفة في الجدول الزمني ووجهة نظر فريق Angular الأساسي.

@ mlc-mlapis شكرًا على ملاحظاتك. أنا سعيد لأنني تمكنت من توصيل الرسالة عبر :-)

أعلم من العديد من المشكلات الأخرى هنا ، stackoverflow ، أن هناك حاجة كبيرة لهذه الميزة لأنها مطلب شائع جدًا في تطبيقات الأعمال الحقيقية. في الماضي وحتى أكثر في المستقبل.

DzmitryShylovich لا أستطيع أن أرى من اقتراح سليل ng سيكون حلاً

أوصي بإعادة التفكير في النهج المعماري الزاوي لجعله أكثر مرونة وقابلية للاستخدام لسيناريوهات تطبيقات المؤسسات الكبيرة. لا يمكن أن تكون مهمة مستحيلة للإطار الزاوي والفريق تحميل القوالب ديناميكيًا لمكون.

سيناريوهات تطبيق KarlXOL Enterprise هي سبب وجود AOT. 😄 القوالب الديناميكية هي مجرد اختصارات وحل cheaper . لذا من المحتمل أن تكون التوصية بإعادة التفكير غير واقعية.

@ mlc-mlapis كنت أتوقع إجابة كهذه. كلما تساءلت أكثر عن سبب عدم قيام الفريق الزاوي بتوفير ما تحتاجه المؤسسات. وجعل التطبيقات أسرع وأرخص أمرًا أساسيًا في بيئة المؤسسة. لكنك أكدت أن هذا ليس ما تدعمه باستخدام angular 2.

KarlXOL بدافع الفضول فقط ، هل لديك أي معلومات حول وكيفية تطوير Google لتطبيقاتها العالمية؟

@ mlc-mlapis لست متأكدًا من ذلك. هل هي الزاوية 1 أم الزاوية 2 ؟؟

KarlXOL لأن هذا ليس الشيء الوحيد الذي تحتاجه المؤسسات ، فقط لأنه شيء تريد القيام به لا يعني أنه شيء يحتاجه الجميع. كل ما فعلوه مؤخرًا هو جعل التطبيقات أسرع وأسهل لإنشاء التطبيقات ، ما عليك سوى إلقاء نظرة على تخفيضات الحزمة من الإصدار 2 -> الإصدار 4.
أود أن أقترح إعادة التفكير في الطريقة التي تحاول بها تحقيق هدفك ، فالأساليب التي نجحت في AngularJS ليست دائمًا أفضل طريقة عند العمل في Angular.

تضمين التغريدة

KarlXOL لا ، قصدت أكثر من made-in Google على الإنترنت. انظر إلى: https://medium.freecodecamp.com/how-google-builds-a-web-framework-5eeddd691dea#.4n6z26xx0

KarlXOL هذا مثال صغير قمت https://plnkr.co/edit/kz2XKSKWSWZhPoncDQhG؟
كل ما تفعله بهذا هو توفير واجهة المستخدم / التكوين ثم ربط الأساليب للوصول إلى الواجهة الخلفية

تضمين التغريدة يبدو التنفيذ الخاص بي هكذا. لا يتعلق هذا الجزء من التطبيق بالمشكلة الفعلية كما أوضحت في رسالتي الأولية.

Toxicable أنت على حق. منشوري كان غير دقيق فيما يتعلق بالخدمة.

KarlXOL أنا لا أحصل على ما تريد بعد ذلك. لا أرى كيف يمكن أن تكون القدرة على تبديل القوالب أثناء التنقل أفضل من استخدام إعداد عام مثل هذا. منذ ذلك الحين ، ما عليك سوى تحديد مكون وهو 20 LOC فقط

@ mlc-mlapis نشكرك على الدرس في تطوير الويب. كما ذكرت ، يتعلق الأمر بكيفية تطوير جوجل لأطر عمل الويب. يجب أن أعترف أن طلبي من منظور حول كيفية توفير حلول الأعمال للمؤسسات وكيفية استخدام الأدوات والأطر للقيام بذلك. بالإضافة إلى تطوير الأطر كما ذكرت هناك بعض المتطلبات والاحتياجات الأخرى. سأكون ممتنًا لو أعطيت أيضًا هذا النوع من المتطلبات بعض التقييم. في النهاية ، سنستفيد جميعًا أكثر من بعضنا البعض ويمكن أن تكون الزاوية 2 إطارًا أكثر قوة.

Toxicable لا تتعلق عينتك

KarlXOL نعم أعرف ، لم تكن

إذا كان لديك مثال حول كيفية تغليف وظائف CRUD في إحدى الخدمات ، على سبيل المثال ، أود رؤيته. حتى لو كان هذا ممكنا ، هناك حاجة للتنفيذ لكل منتج ، على سبيل المثال ، مكون.

وهذا هو ما فعلته. لقد قدمت حلاً لمشكلتك ، ليس بالطريقة التي تريدها ، لكنه حل لا أقل. ومع ذلك ، تبقى وجهة نظري. لا أرى ما تكسبه من خلال تبديل القوالب وإخراجها إذا كان ذلك ممكنًا بطريقة ما ، وفي كلتا الحالتين لا يزال يتعين عليك كتابة رمز القالب ، فما الذي ستكسبه بالضبط مقابل مقدار العمل المكثف إلى حد كبير سيستغرق الأمر حتى الاقتراب من تنفيذ شيء مثل هذا في إطار العمل؟

تضمين التغريدة لقد فهمت. أنا فقط أكتب رمز القالب. كل الكود الآخر يبقى دون تغيير !! تخيل التنفيذ العام لإدارة البيانات الرئيسية ، بما في ذلك خدمتك من أعلى. ما عليك سوى تغيير القالب وتنفيذ جدول آخر (كائن أعمال). هذا ممكن على الأقل في Angular 1.

KarlXOL وهذه مشكلة في الواقع إذا قمت بتطبيق هذا المبدأ على نطاق واسع. نظرًا لأنه لا يمكنك إجراء اختبارات مناسبة حيث يتم تجميع الكثير من التعليمات البرمجية في وقت التشغيل ، لذلك يمكنك العثور على الكثير من الأخطاء المخفية فقط في وقت التشغيل. وهذا غير مقبول. لا يمكنك اللعب بهذا المفهوم إلا على نطاق صغير وستظل تواجه الكثير من عدم القدرة على التنبؤ.

ما عليك سوى تغيير القالب وتنفيذ جدول آخر (كائن أعمال).

@ mlc-mlapis بالتأكيد ، أنت على حق. ولكن عليك بالتالي إزالة المترجم من الزاوية 2 بعد ذلك ، لأنه من حيث المبدأ يمكنني بالفعل تحقيق ما أريد القيام به. إنها طريقة معقدة للغاية.

لقد أفرطت في التأكيد على حجتك ، ولكنها تشمل أيضًا جميع أنواع البيانات (قاعدة البيانات ، إلخ) التي تقوم بمعالجتها باستخدام أحد التطبيقات. لا يمكنك اختبار كل شيء وسيكون هناك دائمًا شيء متروك لمسؤولية مدير التطبيق.
بالعودة إلى مناقشتنا ، فإن المطلوب - في رأيي - هو مزيج جيد من البراغماتية والرؤية المعمارية. يتم تقديم الرؤية ، هذا أمر مؤكد. ويمكن أيضًا أن تكون بعض البراغماتية بمثابة فوز للزاوية 2. متطلبي ليس غريبًا ويحتاجه الكثير من الناس.

KarlXOL يمكنني أن أتفق مع بعض حججك. ولكن على الجانب الآخر ، أرى أيضًا أماكن بجانبك حيث يجب عليك إعادة التفكير في مفاهيم التطبيق لمجرد أنك ستحصل على تطبيقات أفضل.

ربما نكون في نهاية مناقشتنا لأن وجهة نظر فريق Angular core مهم من وجهة النظر هذه. أردت فقط أن أعبر عن بعض الحجج الخلفية لماذا AOT هي الطريقة المفضلة الآن.

أنا أتفق مع خيار KarlXOL. في متطلبات شركتي ، هناك الكثير من واجهات المستخدم التي تحتاج إلى تكوين ديناميكي. لقد عملت بشكل جيد في الزاوية 1. عندما أهاجر angular1 إلى angular2 ، يصبح الأمر فظيعًا. أخيرًا ، وجدت DynamicComponentLoader واستخدمته لحل المشكلات. لكن الأداء غير مقبول إلى جانب الكثير من العملاء الذين اشتكوا مؤخرًا.

لقد أجريت مناقشة في شركتي. يعتقد معظم المطورين في شركتي أن Angular2 قاموا بالكثير من الأشياء الثابتة (القابلة للتحكم). لقد حد المطور من العمل مع الأشياء الديناميكية ، مثل القالب الديناميكي ولغة التغيير الديناميكي وما إلى ذلك. أعتقد شخصيًا أنه سيفقد المرونة. أنا أيضًا أوصي بشدة أن توفر الزاوية 2 هذه نوعًا من الوظائف الديناميكية بسهولة أكبر في التعامل معها.

لماذا تحتاج إلى قوالب مختلفة بدلاً من مكونات مختلفة؟ ربما تفتقد إلى إمكانية وراثة المكونات في Angular؟ انظر هنا https://medium.com/@amcdnl/inheritance -in-angular2-component-206a167fc259 على سبيل المثال

شكرا لتوصيتك. لكن الحل ليس ما أريده. السيناريو الخاص بي هو أن قوالب العرض يتم تكوينها ديناميكيًا بواسطة المصمم أو غير المطور وتم حفظها في قاعدة البيانات. تم إصلاح المنطق في معظم المواقف. فقط المتطلبات التي تريد إعادة تصميم التخطيط أو إضافة / ناقص الحقول.
إنه سلوك شائع جدًا في مجال CRM / ERP. مثل odoo إلى حقول السحب والإفلات لتوليد شكل فرق للصناعات المختلفة.

نعم. ثم المشكلة الوحيدة التي يتعين عليك القيام بها هي تجميع قالب معرف من قبل المستخدم كما وصفته لمكون جديد ... على الخادم بالطبع ... مما يؤدي إلى إنشاء وحدة نمطية جديدة تحتوي على هذا المكون الجديد ... حفظ علامة إلى بعض التكوين الذي يقول ... يجب تقديم هذه التفاصيل بواسطة هذا المكون الجديد ... وعند الطلب قم بتحميل الوحدة الجديدة في اللحظة المناسبة.

@ mlc-mlapis
إذا قرأت طلب الميزة وخيط المناقشة بعناية ، فستكتشف أنه سيكون لديك حل أفضل كالحل الذي تقترحه وأيضًا لتجنب الألم والفوضى التي ينطوي عليها نهج الحل هذا.
أوضح @ robert-luoqing جيدًا السيناريو الشائع جدًا والحاجة إلى هذه الميزة.

KarlXOL أعرف. اللحظة الوحيدة التي لا أفهمها هي أن التجميع الديناميكي الوحيد للقوالب المخصصة متوفر بالفعل اليوم وكان دائمًا هنا ... لكن الصيغ أعلاه تقول أن هذه الميزة مفقودة.

من الواضح أنهم لا يستطيعون استخدام AoT بعد ذلك وربما يفهمون سبب عدم تمكنهم من ذلك.

لذا فإن الأشياء الوحيدة الموجودة على الطاولة هي some more user friendly Angular APIs للقيام بتجميع القوالب الديناميكية في وضع JiT ، أليس كذلك؟ حتى بدون التوافق مع وضع AoT.

@ mlc-mlapis
أحتاج إلى توفير حلول عملية وقابلة للصيانة لدعم احتياجات العمل. Angular 2 هو إطار عمل يضع الأساس لذلك من خلال توفير تقنيات برمجية متطورة للغاية. لهذا السبب (ما زلت) أستخدمه.
من ناحية أخرى ، يفتقد الزاوي إلى بعض "سهولة الاستخدام" لدعم المتطلبات الشائعة جدًا. باعتباره الشخص الذي نناقشه هنا على سبيل المثال. يوجد أيضًا مجال للتحسينات لرسائل الخطأ (التطوير ووقت التشغيل) ، وإطار عمل واجهة المستخدم ، وما إلى ذلك.

أن تكون قادرًا على تقديم الحلول أكثر أهمية بالنسبة لي مما تقوم به دائمًا: AoT ، التحقق من النوع الثابت ، اهتزاز الشجرة ، .... !!! (على سبيل المثال ، JIT عادة ما تكون سريعة بدرجة كافية)
أنا أتفهم أن هذا مهم بالطبع ولكن في بعض الأحيان لدي انطباع أنك تتجاهل ما هو مطلوب هناك من قبل المطورين "العاديين".

حسنًا ، إذن نحن نفهم بعضنا البعض. الأشياء الأخرى هي أولويات وآراء عامة حول ما هو مهم وما هو غير مهم لأنواع مختلفة من المشاريع لأن هناك مئات الحالات المحتملة.

هذه الميزة ستكون رائعة. لدي متطلبات مماثلة في مشروع ERP الذي أعمل عليه ، ولسوء الحظ ، بسببه فقط ، لا يمكنني استخدام Angular ، بقدر ما أرغب في ذلك.

أنا أيضا أيد هذه الميزة.
لدينا نظام إدارة محتوى مؤسسي حيث نخدم صفحات من قاعدة البيانات. يمكن للمستخدمين تعديل ملف HTML باستخدام محرر نصوص HTML ، ويمكنهم أداء عدد n من المهام.
نريد إعادة تطوير تطبيق العميل الخاص بنا باستخدام Angular ، لكن هذه الميزة تمنعنا.

@ asadmalik3 يمكنك الحصول على HTML ديناميكي جيد ، لا يمكنك بسهولة استخدام القوالب الديناميكية. تذكر أن القوالب هي مجرد كود JS ، وليس HTML ، ولكي يتم تشغيلها في AOT ، يجب تجميعها.
لذلك ، بالنسبة لنظام نوع aa CMS ، إذا سمحت للمستخدم بتحرير HTML دون إضافة أي مكونات Angular أو أنابيب أو توجيهات أو خدمات جديدة ، فيمكنك فعل ذلك بنسبة 100٪ غرامة. يمكنك حتى استخدام المكونات الموجودة في وقت التشغيل واستبدالها بمكونات العمل المترجمة في التطبيق الخاص بك. ومثال على ذلك angular.io انظر https://github.com/angular/angular/blob/master/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
لقد تغيرت الأمور في Angular من AngularJS للأفضل ، مع أشياء مثل AOT أصبحت تطبيقاتك أسرع بكثير وتوفر تجربة مستخدم أفضل ولكن في المواقف تحتاج فقط إلى التفكير في المشكلة من منظور آخر بدلاً من توقع أن تعمل بنفس الطريقة تمامًا كما فعلت من قبل.

Toxicable ما هو تأثير أداء إنشاء المكونات أثناء

أول شيء يجب مراعاته هو التبعيات. يمكن أن يؤدي إنشاء مكونات أثناء التنقل باستخدام اعتماديات مختلفة إلى حدوث مشكلات.
ثانيًا ، عندما تقوم بتجميع Angular code في متصفحك ، ستستخدم 100٪ من معالج المستخدمين لديك.
ثالثًا ، سوف تتعب إلى الأبد من مترجم JIT البطيء والكبير
يمكنك رؤية ذلك عن طريق تشغيل التطبيق الخاص بك في وضع JIT.

Toxicable أتساءل فقط كيف يمكننا تمرير التبعيات إلى مكون تم إنشاؤه
هل هي مسؤولية المكون الذي أنشأه؟ هل يمكنك أن تريني مثالًا لائقًا على ذلك؟

لدينا نفس الاحتياجات. ببساطة نسمح لعملائنا بتنظيم العرض المرئي للبيانات بأي طريقة يريدونها. نحن نستخدم نفس المكونات ، نحتاج فقط إلى إعادة تنظيم HTML لكل عميل. لدينا 100 عميل لديهم 10-20 دورًا ، كل دور يمكن أن يكون له تصميم فريد ، نفس المكونات الزاويّة. لكن لدينا المئات من قوالب HTML الفريدة التي تستخدم مكونات Angular الشائعة. هذا ليس من غير المألوف. لقد نظرنا في إنشاء النماذج ديناميكيًا باستخدام Angular ، وقد ينجح ذلك ، ولكن تخزين قالب HTML مؤقتًا وجاهزًا يكون أسرع بكثير. سننظر ديناميكيًا في إنشاء ليس فقط HTML ولكن أيضًا وضعه في مكون يجب أن يكون مشتقًا ديناميكيًا ، لكنني لا أعلق الأمل في أنه سينجح. لذلك ، إذا كان قالب HTML يحتوي على نفس القطع الأثرية الزاويّة الدقيقة (التبعيات ، والمكونات ، وما إلى ذلك) ، فيبدو من المعقول أن أكون قادرًا على تبديل القالب للحصول على تخطيط جديد.

@ asadmalik3 تقوم بتمرير الأصل Injector إلى المكونات التي تم إنشاؤها أثناء التنقل حتى يتمكنوا من استخدام أي من الخدمات الموجودة بالفعل. إذا كنت ترغب في الحصول على خدمات جديدة ، فأنت بحاجة إلى تحميل وحدة نمطية

glwbkfs يمكنك أن تفعل بالضبط ما ذكرته بالفعل ، angular.io يفعل ذلك بالضبط. يستخدمون نفس المكونات Angular التي تم تنظيمها فقط بطرق مختلفة في كل صفحة من صفحات المحتوى والتي في وقت التشغيل يتم تبديل html لتلك المكونات لمكونات تشغيل موجودة مسبقًا.
يمكن مشاهدة مثال هنا https://github.com/angular/angular/blob/master/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
أعتقد أن هذا lib يمكنه أيضًا فعل الشيء نفسه https://github.com/laco0416/ng-dynamic
طالما أنك لا تريد إنشاء أي شيء ديناميكيًا ، فأنت تمامًا في عالم ما يمكن أن تقدمه Angular

Toxicable ما أراه في مكون عارض

@ asadmalik3 لا أفهم ما تعنيه
مستندات الإدخال هي مجرد لغة html عادية تجدها في أي صفحة html.
نظرًا لأنك قد تسيء فهم كيفية عمل هذا ، فقد قمت بعمل عرض توضيحي صغير لكيفية تطبيقه هنا
https://plnkr.co/edit/B5aIMZ7rYCLn1WizqUnW؟p=preview

إذا كان هناك شيء مثل {{title}} في html الخاص بي تم إرجاعه من الخادم ، فلن يقوم angular بحله باستخدام أسلوبك.

@ asadmalik3 كلا ، لم أقل ذلك أبدًا.
قلت إن القيام بشيء مثل {{title}} يتطلب تجميع القالب

طالما أنك لا تريد إنشاء أي شيء ديناميكيًا ، فأنت تمامًا في عالم ما يمكن أن تقدمه Angular

بمعنى أنه إذا كنت ترغب في تجميع أي شيء لن يعمل ، فإنه يعمل فقط مع المكونات الموجودة مسبقًا

أنتم يا رفاق مضحكون ، لماذا أختار الزاوي إذا كان علي تقديم خدمة html ثابتة من الخادم؟ في رأيي المتواضع ، يجب ألا تشارك مثال عارض المستندات هذا مع أي شخص هناك ، لأنه لا فائدة منه. في أي تطبيق أعمال خاص بالمؤسسات لن يكون لدى أي شخص قوالب عرض مسبقة (html) على الخادم "على الإطلاق". يتم عرض مثل الصفحة دائمًا على بيانات مختلفة لعميل مختلف.

لدي شعور قوي بأن المضي قدمًا يا رفاق سيتعين عليك تقديم طريقة "سهلة" و "مقبولة" للحصول على القوالب من الخادم وتجميعها في وقت التشغيل. لا أريد أن يكون طلبي سريعًا بنسبة 100٪ ، وسأكون سعيدًا بأداء 90٪ ، لكن ينبغي أن يوفر لي المرونة.

Toxicable انظر هذا المكبس https://embed.plnkr.co/jkWaZnfaH8bD7787BM5W/
لدي قائمة المنتجات وقائمة العملاء. تظهر قائمة المنتجات في الأعلى تليها قائمة العملاء.

يريد أحد موكلي تغيير الطلب ، ويريد العميل رؤية قائمة العملاء أولاً ثم قائمة المنتجات. في هذه الحالة ، سأطلب من العميل تعديل html باستخدام محرر الويب أو شيء من هذا القبيل.

ولكن في الوقت الحالي ، إذا اضطررت إلى تغيير الترتيب كما أوضحت أعلاه ، يبدو أنه يتعين علي إنشاء مكون جديد لتحقيق ذلك.

لذلك سيكون لدي مكون واحد يعرض المنتجات أولاً ثم العملاء والمكون الثاني يعرض العملاء أولاً والمنتجات ثانيًا.

@ asadmalik3 لا أرى أي سبب يجعل هذا الأمر ديناميكيًا على الإطلاق. مطالبة العميل بتحرير HTML؟
فقط لتغيير الطلب؟ لماذا ا؟
ما عليك سوى إنشاء عنصر واجهة مستخدم (مثل مربع التحديد) يغير الترتيب ويحفظه في قاعدة البيانات ، وعندما يفتحونه مرة أخرى ، قم بتحميله في تحديد الترتيب هذا ثم تم القيام به.

لا يتعلق الأمر بتغيير ترتيب البيانات ، بل يتعلق بالمرونة التي تقدمها لعملائك. فكر في تلك الاحتمالات التي تنشأ عندما تسمح لعميلك بتعديل html لصفحتك. أنت تسمح لهم بفعل أي شيء تقريبًا. ماذا لو أراد أحد عملائنا وضع إعلان مصور أعلى قسم "العملاء"؟ والآخر يريد إظهار بعض المعلومات أو التعليمات المهمة قبل قسم المنتجات؟ كل شيء هناك ، يمكنهم فعل ما يريدون.

علاوة على ذلك ، يريد كل عميل تخصيص موضوعه ويريد عرض البيانات وفقًا لاحتياجاته ، يريد بعض عملائنا تخطيطًا محاصرًا ، ويريد البعض عرض البيانات في هيكل جدولي ، ويريد بعض عملائنا إظهار الصورة جنبًا إلى جنب مع كل لن نجلس ونجري كل هذه التغييرات ، فنحن نقدم المرونة ، ويمكن للعميل القيام بكل هذه التغييرات بنفسه. المرونة هي المفتاح هنا.

هل تقصد شيئا مثل هذا المقال؟
https://medium.com/@DenysVuika/dynamic -content-in-angular-2-3c85023d9c36

قرأت المقال. "تجميع وقت التشغيل" هو ما أحتاجه. ولكن كما قال KarlXOL ، فإن الحل معقد جدًا وثقيل جدًا (تحتاج الوحدة المترجمة إلى الرجوع إلى وحدات أخرى ضرورية ثالثة وما إلى ذلك). كما أنها لم تعمل بشكل جيد مع AOT عندما اختبرت. "أنا شخصيًا بحاجة إلى حل مباشر وبسيط يمكننا من خلاله تعيين قالب مكون ديناميكيًا بطريقة ما ، ولكن لا يمكننا كسر سلوك AOT". هذا ما اريد.

راجع للشغل: لا أعتقد أن "المحتوى الديناميكي" ليس فقط مكون المحتوى الموجود بالفعل في الوحدة النمطية ، فالتطبيق فقط يشير إليه ويعرضه عن طريق اختيار المستخدم. ولكن أيضًا مكون المحتوى غير معروف حتى وقت التشغيل. يتم إنشاؤه عن طريق إدخال المستخدم أو التكوينات عن بعد.

+1

سيكون من الجيد أن تكون قادرًا على تقديم وعد أو يمكن ملاحظته كقالب في مصمم المكون. ثم يمكن أن نحصل على قوالب مقدمة من الواجهة الخلفية.

أهلا،

نحن نبحث حاليًا أيضًا عن طريقة ما لتجميع المكونات المخصصة في وقت التشغيل. حالة الاستخدام لدينا هي معاينة البريد الإلكتروني بتنسيق HTML ، والذي يحتوي على الكثير من البيانات التي يتم تحريرها باستخدام نموذج Angular 4.

نستخدم حاليًا قوالب الشارب التي تحتوي على صفحة ويب كاملة ، ثم نستبدل جميع المتغيرات ، ونضع المحتوى في إطار iframe ونحدّث أبعاد iframe.

يعمل هذا بشكل جيد ، ولكنه ينتج عنه وميض حيث يتم استبدال محتويات iframe بأكملها مرارًا وتكرارًا.

يتم تحديد قوالب HTML من قبل المستخدمين من التحديد الموجود مسبقًا (الذي يتم توفيره من قبل جهة خارجية) أو تحريرها مباشرة من قبل المستخدمين ، لذلك لا يمكننا تجميع تلك التي تستخدم AOT.

أنا مهتم أيضًا بالحلول الأخرى ، ونحن حاليًا نتلاعب بفكرة أننا سوف نتجاوز Angular في الغالب ونستبدل {{var_name}} بـ <span id="var_name"></span> ثم نستخدم js فقط لاستبدال الأشياء.

هذا ، من ناحية أخرى ، يجبرنا على تنفيذ ما صمم Angular لحله ، لذلك سيكون من الرائع أن يكون لديك وخيارًا للقيام بذلك ، حتى لو كان ذلك يعني أننا سنفقد القدرة على AOT.

ربما يجب أن يكون هذا مشروعًا منفصلاً ، حتى نتمكن من ترميز تطبيقاتنا باستخدام AOT ، ثم إضافة @ الزاوي / القوالب الديناميكية التي من شأنها أن تضيف القدرة التي نبحث عنها ، ولكن دع باقي التطبيق يعمل كإصدار AOT. (في البداية ، سيتم إعادة تجميع JIT فقط ليكون أكثر سهولة في الاستخدام ، ولكن مع بذل المزيد من الجهد يمكن أن يتطور ليصبح شيئًا آخر تمامًا)

ماذا تعتقد؟

أهلا. لديّ حالة استخدام مختلفة إلى حد ما ، ولكن تم إخباري بأن طلب الميزة الخاص بي كان نسخة مكررة من هذه المشكلة.

في شركتي لدينا تطبيق يسمح للمستهلكين بالبحث عن بيانات الملكية المتوفرة من خلال السجلات الوطنية العامة. إذا اختار المستخدم خاصية ، فسنعرض تقريرًا بالبيانات المتاحة. تم إنشاء هذا التقرير من قبل طرف ثالث وهو أتش تي أم أل خالص (مجرد جدول كبير). تحتوي بعض العناصر في التقرير على "روابط أولية" إلى أجزاء أخرى من المعلومات يمكن للمستخدم شراؤها. هذه "الروابط الأولية" محددة بوضوح / سهلة التحديد وتحتوي على جميع المعلومات المطلوبة لإنشاء ارتباط كسمات (معرفات فريدة لمستندات مختلفة). يدعم تطبيقنا حاليًا لغتين ، لذا سيستغرق تجميع JiT إلى الأبد.

الحل الحالي الخاص بي هو ربط html المطهر بداخل HTML من المكون. خلال مرحلة AfterViewInit ، يحفر المكون HTML هذا ويستبدل الروابط الأولية بعناصر الربط. الأمور تسير على ما يرام ، على ما أعتقد (قليل الاختراق ، لكنني على ما يرام مع ذلك). ومع ذلك ، سأشعر بتحسن (يمكنني أن أكون مصابًا بالتوحد قليلاً بشأن هذه الأشياء) إذا كان بإمكاني استخدام routerLinks.
يحدث التنقل فقط داخل تطبيق الصفحة الواحدة ويتم تحديث الصفحة فقط لأنني يجعلني دبًا حزينًا.

من الناحية المثالية ، أفترض أنه سيكون لدي طريقة للإعلان بطريقة ما عن قائمة بيضاء بالمكونات والتوجيهات (مثل routerlink) التي يمكنني تجميع جزء من html الموثوق بها. سيكون من الممكن القيام بذلك من خلال تجميع AoT. يبدو أن هذا يجب أن يكون ممكنًا من خلال بعض طرق we_advise_you_not_to_do_this_in_production-kinda ، لكنني لم أجد طريقة بعد.

هذا ليس أمرًا بالغ الأهمية بالنسبة إلى جهاز الصراف الآلي الخاص بطلباتي (ربما يكون الشخص الوحيد الذي سيسجل الفرق هو أنا) وأنا سعيد جدًا بالإطار المجيد الذي تحولت إليه angular-2 :-).

eliasre ... وماذا عن استخدام نفس المبدأ مثل موقع http://angular.io فعليًا حيث يتم أيضًا تحليل HTML الخالص بطريقة ما. أثناء العملية ، يتم البحث عن قاموس للمكونات المعروفة وفي تلك الأماكن يتم إنشاء مثيل للمكونات الأصلية الزاويّة ديناميكيًا. لذا يمكنك استخدام أي منها ... بكل وظائفها الداخلية وما إلى ذلك ...

@ mlc-mlapis يبدو أنه 100٪ بالضبط ما أبحث عنه! أعلم أن هذا ليس تجاوز سعة المكدس ، ولكن هل يمكنك توجيهي في اتجاه بعض الوثائق حول كيفية استخدام هذا؟

أشعر أنني أتعلم شيئًا جديدًا عن Angular 2 كل يوم. عادةً ما يبدو أنه تم توثيق ما أتعلمه في أول 50 صفحة من دليل جولة الأبطال على الرغم من: P

eliasre هنا عرض توضيحي https://stackblitz.com/edit/angular-dynamic-content-viewer؟file=app٪2Fdynamic-content-viewer.ts

Toxicable نجاح باهر ، يبدو رائعًا. ولكن هل يعمل مع عرض المحتوى؟ لدي ترميز مثل هذا (من النهاية الخلفية) يجب إضافته ديناميكيًا

<component1 smth="smth">
  <component2>item 1</component2>
  <component2>item 2</component2>
  <component3 smth="smth">
    <component4>smth</component4>
  </component3>
</component1>

ويتم إجبارها حاليًا على استخدام JiT (مع aot في معظم التعليمات البرمجية) لتجميع هذا في وقت التشغيل

artaommahe ... ليس من الممكن مباشرة مقابل component1 ... لكن إذا كنت تستخدم غلافًا بقالب مثل ^ ^ ^ ... لكنني لم أحاول أبدًا بعد.

ولكن إذا كنت تستخدم غلافًا مع قالب مثل

هذا التكوين غير معروف حتى جاء من النهاية ، وهناك المئات من الاختلافات

artaommahe ... آه ، فهمت. ولكن لا يزال مع تحليل المكونات الديناميكية وإنشاء مثيل لها ، من الممكن إدارة حالتك حتى ^ ^ ^ ... أنت فقط تقوم بإسقاط محتوى غير مباشر بطريقة أخرى ... عبر الكود الخاص بك ، على ما أعتقد ...

Toxicable ، artaommahe : تتعلق بالعرض التوضيحي "... stackblitz ...". هذه أشياء قديمة وغير قابلة للاستخدام في تطبيقات الأعمال الواقعية. الكثير من التعليمات البرمجية والنفقات العامة لإدخال HTML عادي فقط. الشيء نفسه بالنسبة لحل محمل المكون الديناميكي. بالإضافة إلى ذلك ، فإن إدخال HTML بدون ربط البيانات ليس حالة الاستخدام التي نتعامل معها في الحياة اليومية.

كما هو الحال الآن: لا يوجد حل لتحميل التنسيق (HTML) لمكون أثناء الطيران في الزاوية 2-4.

KarlXOL أنا آسف لأنك تسيء فهم بعض الأشياء حول كيفية عمل هذا العرض التوضيحي.

هذه أشياء قديمة

ما الذي يجعل شيئًا قديمًا سيئًا؟

الكثير من التعليمات البرمجية والنفقات العامة لإدخال HTML عادي فقط

أنت تقوم بتطبيقه مرة واحدة فقط ثم HTML فقط كالمعتاد ، لا يوجد حمل لذلك لا أعرف ما تعنيه بذلك. حتى أن هناك حزم npm تقوم بذلك نيابة عنك

تطبيقات الأعمال الواقعية

تستخدمه بشكل جيد angular.io لذا لا أعرف من أين حصلت على هذه المعلومات.

إدخال HTML بدون ربط البيانات

ربط البيانات يعمل مع هذا

كما هو الحال الآن: لا يوجد حل لتحميل التنسيق (HTML) لمكون أثناء الطيران في الزاوية 2-4.

نعم هنالك

Toxicable : لا ، لا يعمل مع ربط البيانات. حدِّث العرض التوضيحي باستخدام {{myvar}} في نموذجك وأطلعني على كيفية عمله. شكرا لك مقدما

KarlXOL ، لا يمكنك إقحام HTML مباشرة ، فلن يعمل هذا أبدًا بدون تجميع html ، وهو ليس نقطة العرض التوضيحي ، يمكنك تحديد البيانات في مكوناتك. النقطة المهمة هي إظهار كيف يمكنك الحصول على تخطيطات ديناميكية وإعادة استخدام المكونات الخاصة بك بأي طريقة تريدها ، من خلال إعادة استخدام المكون ، فلن تحتاج إلى إعادة تجميع أي شيء.
ما تطلبه هو قوالب مجمعة ديناميكيًا لا معنى له في هذا السياق

Toxicable لذا لا توجد طريقة حاليًا

Toxicable هل يمكنك أن تكون لطيفًا testname ، واجعل المكون my-component يستخدم قيمة testname كقيمة المعلمة name التي يعرضها. أحتاج بشكل أساسي إلى تمرير المعلمات إلى المكون الذي تم إنشاؤه ديناميكيًا وتحديثها في كل مرة يتم فيها تحديث القيمة في الحقل النصي testname .

لقد جربت العشرات من الأساليب المختلفة ولكن لا يمكنني تفعيلها. إذا لم نتمكن من الحصول على {{myvar}} في html مباشرة ، فنحن بحاجة إلى مكون يسمى <display-value [value]="bind_to_var_name_x_or_y" /> . هل هذا ممكن؟

swftvsn ... عندما تنشئ مرجعها ... على سبيل المثال _cmpRef . ثم من خلال _cmpRef.instance يمكنك الوصول إلى @Input() و @Output من هذا المكون مثل ... ( @Input() myprop: string; و @Output() messages: EventEmitter<string> = new EventEmitter<string>(); ):

this._cmpRef.instance.myprop = 'xxx';

أو

this._cmpRef.instance.messages.subscribe(this.messageSubscription);
...
messageSubscription = (_message: string) => {
     ...
}

يجب أن يكون التحميل الديناميكي لكائن HTML هو الميزة الأساسية لـ Angular 2 ولكن للأسف ، باسم الأداء ، لا يتوفر. في المستقبل ، ستأتي هذه الميزة أم لا؟

Toxicable شكرًا على العرض التوضيحي الخاص بك ، لا يعمل ربط الحدث الديناميكي بكائن HTML ، مثل KeyPress و ngOnChanges إلى كائن إدخال

شكرا @ mlc-mlapis على المدخلات!

لقد قمت الآن باستكشاف الاحتمالات ليوم واحد وما أحتاج إلى القيام به ربما يمكن القيام به باستخدام مكونات ديناميكية.

شيئان فكرت فيهما أثناء مطاردة حفرة الأرانب:

1. قد تكون الوثائق الرسمية أفضل قليلاً ، أشعر أنها ليست جيدة ومفصلة مثل بقية مستندات Angular
2. على الرغم من أنه يمكن إنجاز معظم حالات الاستخدام باستخدام واجهة برمجة التطبيقات الحالية ، إلا أنني أشعر مرة أخرى أنه يمكن أن يكون أسهل كثيرًا وأكثر سهولة.

لقد أفسد المجتمع باستخدام هذا الإطار الرائع ، وبالتالي فإننا نميل إلى توقع أن يكون كل شيء سهلًا ولطيفًا ؛)

swftvsn ... هناك المستند الرسمي على الموضوع https://angular.io/guide/dynamic-component-loader. بالطبع ، يمكن أن يحتوي على المزيد من الأمثلة ، خاصةً بعض الأمثلة التافهة جدًا للسماح بطريقة سريعة لكيفية التقاط الفكرة الأساسية.

على الرغم من سؤال واحد - لا بد لي من إنشاء قوالب شارب مباشرة ويبدو أنني أحصل على أشياء مثل هذا:

<table>
  {{#each rows}}
    <tr>
      <td>{{someprop}}</td>
    </tr>
  {{/#each}}
</table>

لقد قمت بالفعل بحل جزء المكون الديناميكي ، حتى عند تداخل العناصر أو الحلقات ، ولكن لا يمكنني العثور على طريقة جيدة لحل هذه المشكلة ، حيث إنني أغير {{}} العناصر بمكون ، ولكن يجب ألا يترك المكون أي أثر لنفسه ، لأن ذلك يفسد الجدول حقًا. الآن بما أن الاستبدال = true لم يعد يعمل ، فأنا محتار قليلاً في هذا. لن يعمل التوجيه أيضًا لأنه لا يوجد شيء لإرفاقه به.

أيه أفكار؟

@ mlc-mlapis أعتقد بالفعل أن التوثيق الرسمي يلبي احتياجات الحالة البسيطة ، لكنه يترك الأجزاء الصعبة دون إجابة. مثل هضم قوالب الشارب أو غيرها من الجهات الخارجية التي تم إنشاؤها باستخدام لغة تأشير النص الفائق html واستبدال أجزاء منها بمكونات زاوية حية.

أفهم أن السرعة هي رقم 1 والباقي يأتي بعدها وطبيعة AOT لـ Angular تجعل الكثير من الأشياء صعبة. اختيار جيد إذا سألتني ، لكن العالم المثالي لا يزال يسمح JIT (بسهولة) جنبًا إلى جنب مع AOT في الأماكن التي يراها المطورون مناسبًا.

swftvsn ... لهذه الحالات attribute component مناسب جدًا ، مثل <tr mycolumns></tr> ، حيث mycolumns هو مجرد مكون عادي مع قالب (للأعمدة) أو تطبيق نفس النمط أيضًا بالنسبة إلى <td mycolumn></td> ... ولكن مع المكون الديناميكي ، فهو أيضًا مفهوم غير قابل للاستخدام لأنك دائمًا ما تقوم بإنشاء تتبع ... عنصر متداخل غير مسموح به داخل بنية الجدول.

لست متأكدًا ولكني أعتقد أن الفرصة الوحيدة هي فقط لف الجدول بأكمله كمكون ديناميكي يمكن أن يحتوي على أي مكونات فرعية ، مثل <tr mycolumns></tr> مكرر باستخدام *ngFor ...

القوالب الديناميكية هي مطلب هنا أيضًا. نحن لا نهتم بأداء بدء التشغيل على الإطلاق ، حيث سيبدأ طلبي مرة واحدة كل عدة أيام.

تضيف القوالب الديناميكية طبقة توسع إضافية إلى بنية التطبيق.

الفكرة الأساسية هي أنه مع هذا التمدد يمكننا استعادة المرونة المفقودة. في أيام ما قبل SPA ، (كما هو الحال في مطوري الويب) سنستخدم تقنية الواجهة الخلفية لكل عملية حقن التبعية وتحميل الفئة الديناميكية / تحميل التجميع الديناميكي لتنظيم تطبيقنا في مفهوم "كل شيء عبارة عن مكون إضافي". كانت الواجهة الأمامية مجرد جزء منه ، وعندما قمنا بتحميل جزء من الكود الذي يتعامل مع طلبات Weith بشكل ديناميكي ، فإن هذا الجزء من الكود سيوفر أيضًا واجهة ويب لوظائفها.

مع SPA ، اكتسبنا أداءً وشعورًا يشبه سطح المكتب ، لكننا فقدنا تلك المرونة.

يعد استخدام القوالب الديناميكية أمرًا بالغ الأهمية لهذا النوع من الوظائف. يتمتع نظام المتصفح الأساسي بكل المرونة اللازمة لهذا وميزاته المؤسفة للغاية مثل AOT (وهي مهمة ، ولكن بالنسبة لأشخاص آخرين) نوعًا من الزوايا المعطلة المحتملة.

ستقوم Angular بإصدار Angular Elements في غضون أسابيع قليلة وآمل أن تهتم بهذه المشكلة. يرجى التحقق من الرابط أدناه للحصول على Angular Elemetns.

https://docs.google.com/presentation/d/1jiXHYwfe1iSUiVLdKLFhSPRHLI_FmIvrI60QTpP6KLk/edit#slide = id.g26d86d3325_0_0

ستقوم Angular بإصدار Angular Elements في غضون أسابيع قليلة وآمل أن تهتم بهذه المشكلة. يرجى التحقق من الرابط أدناه للحصول على Angular Elemetns.

ولكن هذا لا يحتوي على أي شيء مع تجميع / تجميع قالب عشوائي ، كيف يحل ذلك هذه الحالة عندما يكون لديك واجهة مستخدم ديناميكية وتحتاج إلى تجميع واجهة المستخدم هذه من ترميز عشوائي من الواجهة الخلفية؟ لا يمكن ترجمتها مسبقًا أو إنشاؤها كمكون وتتغير كثيرًا

هذه الميزة موجودة في خارطة الطريق لعام 2018 ، لقد تلقيت للتو ردًا من براد غرين (bradlygreen) في تويتر. :)

nsksaisaravana هل يمكنك مشاركة رابط التغريدة؟

@ asadmalik3 يرجى التحقق من لقطة الشاشة أدناه أو تصفح https://twitter.com/bradlygreen وتحقق من تقارير StackOverflow عن النمو الهائل في تعليقات Angular الشائعة على Twitter .

nsksaisaravana @ asadmalik3 هل هذه الميزة (قالب تحميل ديناميكي لمكون) موجودة على خريطة الطريق لعام 2018؟ هل لديك أي رابط لخارطة طريق 2018 حيث تم ذكر ذلك؟

sunilpes ... لكنه متاح الآن ... ما عليك سوى استخدام Angular compiler ، لذا يمكنك الجمع بين وضع AOT (عادةً لنواة التطبيق) + وضع JIT (لتلك الأجزاء الديناميكية).

اقرأ هذا: https://github.com/angular/angular/issues/20875

@ mlc-mlapis مررت بمشكلة # 20875. لقد حاولت تحميل الوحدات على الفور (وقت التشغيل) باستخدام الوحدة النمطية compiler باستخدام الطريقة compileModuleAndAllComponentsSync أنها تعمل. لكن سؤالي هنا هو:
الوحدة النمطية compiler داخلية في Angular (واجهة برمجة التطبيقات منخفضة المستوى). هل ستعمل كما هو متوقع في الإصدارات الرئيسية القادمة أيضًا؟
نحن نحاول بناء أداتنا بناءً على هذه الوحدة (المترجم) لتحميل الوحدات الديناميكية بسرعة.

sunilpes ... لكنه متاح الآن ... ما عليك سوى استخدام Angular compiler ، لذا يمكنك الجمع بين وضع AOT (عادةً لنواة التطبيق) + وضع JIT (لتلك الأجزاء الديناميكية).

لا يمكن استخدامه بسبب هذا https://github.com/angular/angular/issues/19902 فهو بطيء للغاية بالنسبة للقوالب الكبيرة

sunilpes ... ivy ... والذي سيفتح إمكانيات جديدة مثيرة للاهتمام حقًا ... لكنه يتعلق بالإصدار 7 ... حتى الآن بعيد جدًا عن قول أي شيء ملموس. 😄

معاينة Angular Ivy Renderer- محرك عرض Angular الجديد !!!

https://github.com/robwormald/ivy-code-size

أي تحديثات عندما تكون هذه الميزة متاحة؟

@ scottseeker ... عليك أن تنتظر Ivy إذا لم تكن الاحتمالات الحالية كافية.

@ mlc-mlapis ننتظر هذه الميزة. تتمتع هذه الميزة بإمكانيات كبيرة لتطوير وحدات قابلة للتوصيل في وقت التشغيل. دعونا نرى كيف ستسير الامور ...

sunilpes ... نعم ، يمكنك دراسة بعض المعلومات عنها:

https://is-angular-ivy-ready.firebaseapp.com/#/status
أو ...

• https://blog.angularindepth.com/ivy-engine-in-angular-first-in-depth-look-at-compilation-runtime-and-change-detection-876751edd9fd
• https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c

KarlXOL إذا كان هذا لا يزال منطقيًا بالنسبة لك: قم بإنشاء v2Component باستخدام templateUrl = yourNewHTML ... وتوسيع v1Component

KarlXOL إذا كان هذا لا يزال منطقيًا بالنسبة لك: قم بإنشاء v2Component باستخدام templateUrl = yourNewHTML ... وتوسيع v1Component

هناك الكثير من الحالات عندما يأتي الترميز من النهاية الخلفية (محتوى الدرس السابق مع العديد من التمارين المختلفة) ويتغير غالبًا عبر لوحة تحكم منفصلة للمشرف

أنا أيضا أحب هذه الميزة.
لتتمكن من تغيير المكون "angular-html" في وقت التشغيل.

mastronardif +1

كان لدي مهمة حيث كنت بحاجة إلى تقديم قوالب التحكيم المقدمة من الخادم لعرض نموذج مخصص. يجب إنشاء المكون وتصنيفه في وقت التشغيل لتمكين الارتباطات في القوالب.

خطوات تحقيق ذلك:

• إنشاء مكون رئيسي من شأنه أن يقوم بإنشاء وعرض المكون الفرعي المترجم ديناميكيًا داخل ViewContainerRef الخاص به.
• قم بإدخال مترجم فيه باستخدام الرمز المميز للمترجم.
• استخدم عناصر الزخرفة المكونة و NgModule (وهما مجرد وظائف تحت الغطاء) لتحديد المكون والوحدة التي ستعلنها.
• تجميع كلاهما. سيعطيك هذا مصنع المكون الذي يمكن استخدامه لإنشاء مثيل المكون.
• استخدم مصنع المكونات لإنشاء المكون داخل حاوية العرض.
• اختياري: قم بتعيين قيم لمدخلات المكون إذا كانت تحتوي على أي منها.

import {AfterViewInit, Compiler, CompilerFactory, Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
import {CommonModule} from '@angular/common';
import {JitCompilerFactory} from '@angular/platform-browser-dynamic';

@Component({
    selector: 'app-parent',
    template: '<div #container></div>'
})
class ParentComponent implements AfterViewInit {
    @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
    constructor(private compiler: Compiler) {}

    ngAfterViewInit() {
        // Must clear cache.
        this.compiler.clearCache();

        // Define the component using Component decorator.
        const component = Component({
            template: '<div>This is the dynamic template</div>',
            styles: [':host {color: red}']
        })(class {});

        // Define the module using NgModule decorator.
        const module = NgModule({
            declarations: [component]
        })(class {});

        // Asynchronously (recommended) compile the module and the component.
        this.compiler.compileModuleAndAllComponentsAsync(module)
            .then(factories => {
                // Get the component factory.
                const componentFactory = factories.componentFactories[0];
                // Create the component and add to the view.
                const componentRef = this.container.createComponent(componentFactory);
            });
    }
}

بعض الأشياء التي يجب وضعها في الاعتبار:

• تذكر استدعاء clearCache على المترجم. إذا لم تقم بذلك ، فستتمكن فقط من تقديم المكون الخاص بك مرة واحدة. عندما تحاول تجميعه في المرة الثانية ، سيشتكي Angular من نفس المكون الموجود في وحدتين مختلفتين.
• ليس عليك استخدام فئات مجهولة في تعريفات المكونات والوحدات النمطية. لقد استخدمت بالفعل الفصل الدراسي الذي أمتلكه بالفعل في طلبي للإعلان عن المكون.
• المترجم غير متاح عادة إذا تم تجميع التطبيق باستخدام مترجم AOT. لحل هذه المشكلة ، يتعين علينا توفير المترجم بشكل صريح:

export function createCompiler(compilerFactory: CompilerFactory) {
    return compilerFactory.createCompiler();
}

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [],
    providers: [
        // Compiler is not included in AOT-compiled bundle.
        // Must explicitly provide compiler to be able to compile templates at runtime.
        {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
        {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
        {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}    ],
    declarations: []
})
export class CoreModule {}

@ alarm9k ... نعم ، هذه الطريقة لاستخدام مترجم JIT

@ alarm9k لدي متطلبات متشابهة جدًا وجربت نفس النهج العام الماضي ولكني لم أستطع تشغيله مطلقًا. أعتقد أن الشيء الذي كنت أفتقده هو التغييرات التي طرأت على الوحدة. لذا فأنا أجربها سريعًا والشيء الوحيد الذي لا يمكنني اكتشافه من مقتطف الشفرة هو مصدر وظيفة "createQuestionFunction":

const componentFactory = this.createQuestionContent(factories.componentFactories[0]);

BKHines شكرا

@ alarm9k هاها ، هذا ما قمت

@ alarm9k هذا مثير للاهتمام حقًا. شكرا لك! هل لديك أي إحصائيات عن تكلفة عدم اهتزاز شجرة المترجم بعيدًا عن حزمتك؟

الفرق هو 329 كيلو بايت.

الفرق هو 329 كيلو بايت.

فاتك gziping

@ alarm9k هل من الممكن حقن الخدمات في مكون تم إنشاؤه مثل هذا؟ عندما أحاول ضخ ChangeDetectorRef و ElementRef في مُنشئ المكونات ، أستمر في الحصول على Can't resolve all parameters for ComponentClass: (?, ?). شكرًا

يوم جيد! كما واجهنا ضرورة استبدال القالب الموجود في المكونات الحالية من مصادر البيانات الخارجية. الآن ، بالطبع ، أحاول حل هذه المشكلة من خلال الإنشاء الديناميكي للمكون ومحاولة نقل المنطق الحالي إليهم. لكن سيكون من الرائع أن تكون قادرًا على تغيير النمط بالضبط. أنا أتطلع حقًا إلى هذه الوظيفة. أود الحصول على تقييم تقريبي لتوقيت ظهور هذه الوظيفة. شكر.

@ alarm9k يعمل جيدًا ، باستثناء ng build --prod . لا توجد أخطاء ، ولكن عندما أقوم بتحميل موقع الويب ، تظهر وحدة التحكم:

خطأ خطأ: " لم يتم تحميل برنامج التحويل البرمجي لوقت التشغيل "
Ni / main.f449713c3fb3867ad6bf.js:1:68849
compileModuleAndAllComponentsAsync main.f449713c3fb3867ad6bf.js:
ngAfterViewInit /6.c40d8b2dc5100b1af302.js:1:560
Xs / main.f449713c3fb3867ad6bf.js:1:126416
Qs / main.f449713c3fb3867ad6bf.js:1:126176
Zs

SamuelMarks هذا على الأرجح لأنك لم تقدم المترجم في الوحدة الخاصة بك.

أين يجب أن يتم تضمينه؟

تقصد في imports: [] للوالد @NgModule ؟ - أي وحدة؟

SamuelMarks هل قمت بتضمين هذا الرمز في الوحدة النمطية الخاصة بك؟ لقد واجهت خطأً مشابهًا منذ أشهر عندما لم أتمكن من تشغيل هذا ولم أكن أتوصل إلى مثال

export function createCompiler(compilerFactory: CompilerFactory) { return compilerFactory.createCompiler(); }

SamuelMarks عليك تضمين المترجم في مصفوفة موفري الوحدة النمطية الخاصة بك. يرجى الاطلاع على مثال الكود الخاص بي أعلاه.

في Angular world ، يعني "تقديم" إضافة شيء ما إلى موفري الوحدة.

أي نصائح لالتقاط التغييرات في المكون الديناميكي من المكون الرئيسي؟ لدي العنصر A الذي يحتوي على الخاصية A. يُنشئ المكون A المكون الديناميكي ، المكون B من سلسلة HTML التي يتم إرجاعها من استدعاء HTTP. يوجد داخل المكون B مجموعة من المكونات C وهي مكونات تم إنشاؤها داخل المشروع. إحدى خصائص الإدخال في المكون C هي الخاصية A. يمكنني تمرير قيمة PropertyA إلى المكون C عن طريق وضعها في مثيل ComponentB:

componentB.instance.propertya = this.propertya;

ثم يظهر المكون C القيمة الصحيحة عند التهيئة. ومع ذلك ، عندما أقوم بتغيير الخاصية A في المكون A ، فإنها لا تنعكس على المكون C. لقد قمت بنقل الخاصية A إلى خدمة مشتركة وهذا يعمل بشكل جيد (لذلك يمكنني الالتزام بذلك) ، لكنني أشعر بالفضول لمعرفة كيفية القيام بذلك يمكنك إجراء تغيير هذه الخاصية في المكون الديناميكي والمكونات في المكون الديناميكي؟ حاولت إنشاء متغير إدخال / إخراج والاشتراك في حدث الإخراج ، ولكن لا يوجد نرد أيضًا. تمت المحاولة أيضًا أدناه عند النقر فوق الزر لتغيير الخاصية أ. نفس النتائج.

componentB.changeDetectionRef.detectChanges();

إليك مستودع GitHub بسيط في حالة عدم وجود أي معنى: https://github.com/BKHines/dynamiccomponentexample

@ alarm9kBKHines شكرا، حصلت تقريبا على عمل:

غير معلوم (في الوعد): خطأ: فشل تحميل وحدة الجذر الجذر.

import { Compiler, CompilerFactory, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { ThisComponent } from './this.component';
import { theseRoutes } from './these.routes';

export function createCompiler(compilerFactory: CompilerFactory): Compiler {
  return compilerFactory.createCompiler();
}

@NgModule({
  declarations: [ThisComponent],
  imports: [
    CommonModule, RouterModule, RouterModule.forChild(theseRoutes)
  ],
  providers: [{ provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] }]
})
export class ThisModule {}

المثال أعلاه المقدم بواسطة @ alarm9k لا يعمل في Angular 8 عند استخدام Ivy.

أحصل على الخطأ التالية:

خطأ خطأ: غير معلوم (في الوعد): TypeError: Services.createRootView ليست دالة
TypeError: Services.createRootView ليست دالة
في ComponentFactory_.push ../ node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.ComponentFactory_.create (core.js: 18750)
في ViewContainerRef_.createComponent (core.js: 16282)
على العنوان parent.component.ts: 35
في ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke (zone.js: 391)
في Object.onInvoke (core.js: 24359)
في ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke (zone.js: 390)
في Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.run (zone.js: 150)
في zone.js: 910
في ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 423)
في Object.onInvokeTask (core.js: 24350)
at resolutionPromise (zone.js: 852)
في zone.js: 917
في ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 423)
في Object.onInvokeTask (core.js: 24350)
في ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 422)
في Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask (zone.js: 195)
في drainMicroTaskQueue (zone.js: 601)

@ Igneous01 ما هو إصدار Angular الذي

@ Igneous01petebacondarwin حصلت على نفس الخطأ، عندما enableIvy: true .

تم إنشاء المشروع باستخدام Angular CLI 8.1.3:

Angular CLI: 8.1.3
Node: 10.15.0
OS: win32 x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

ملف حزمة JSON:

"dependencies": {
    "@angular/animations": "~8.1.1",
    "@angular/common": "~8.1.1",
    "@angular/compiler": "~8.1.1",
    "@angular/core": "~8.1.1",
    "@angular/forms": "~8.1.1",
    "@angular/platform-browser": "~8.1.1",
    "@angular/platform-browser-dynamic": "~8.1.1",
    "@angular/router": "~8.1.1",
    "bootstrap": "^4.3.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.1",
    "@angular/cli": "~8.1.1",
    "@angular/compiler-cli": "~8.1.1",
    "@angular/language-service": "~8.1.1",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

الخطأ:

ERROR Error: Uncaught (in promise): TypeError: Services.createRootView is not a function
TypeError: Services.createRootView is not a function
    at ComponentFactory_.create (core.js:26827)
    at dynamic-loader.service.ts:92
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:34209)
    at ZoneDelegate.invoke (zone-evergreen.js:358)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:855
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34190)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at resolvePromise (zone-evergreen.js:797)
    at zone-evergreen.js:862
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34190)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)
    at HTMLButtonElement.globalZoneAwareCallback (zone-evergreen.js:1629)

vunb - يرجى ملاحظة أنه يجب عليك اختبار IVY فقط على إصدارات Angular next . على سبيل المثال ، 9.0.0-next.0 .

دالة التصدير createCompiler (compilerFactory: CompilerFactory) {
إرجاع compilerFactory.createCompiler () ،
}

شكرا جزيلا!

تضمين التغريدة

بادئ ذي بدء ، شكرًا لك على الحل الممتاز الذي ذكرته أعلاه. لقد كان مفيدًا للغاية بالنسبة لي حتى الآن.

أواجه بعض المشاكل في تنفيذ مكونات متعددة والتوجيه بينها عند إنشاء وحدات / مكونات بهذه الطريقة. هل لديك أي نصيحة لتنفيذ هذا؟

على سبيل المثال،

const myModule = NgModule({
            imports: [
                RouterModule.forChild([
                    {
                        path: "",
                        component: component1,
                        pathMatch: "full"
                    },
                    {
                        path: "component2",
                        component: component2,
                        pathMatch: "full"
                    }
                ])
            ],
            declarations: [component1, component2],
            exports: [component1, component2]
        })(class {});

لا يعمل. ولكن استبعاد عمليات الاستيراد يجعل ذلك يتم تحميل المكون 1 افتراضيًا.

إذا كنت بحاجة إلى نموذج ديناميكي ، فأنت تفعل شيئًا خاطئًا!

djleonskennedy هذا تصريح سخيف أنك لم تحاول

كان لدي مهمة حيث كنت بحاجة إلى تقديم قوالب التحكيم المقدمة من الخادم لعرض نموذج مخصص. يجب إنشاء المكون وتصنيفه في وقت التشغيل لتمكين الارتباطات في القوالب.

خطوات تحقيق ذلك:

• إنشاء مكون رئيسي من شأنه أن يقوم بإنشاء وعرض المكون الفرعي المترجم ديناميكيًا داخل ViewContainerRef الخاص به.
• قم بإدخال مترجم فيه باستخدام الرمز المميز للمترجم.
• استخدم عناصر الزخرفة المكونة و NgModule (وهما مجرد وظائف تحت الغطاء) لتحديد المكون والوحدة التي ستعلنها.
• تجميع كلاهما. سيعطيك هذا مصنع المكون الذي يمكن استخدامه لإنشاء مثيل المكون.
• استخدم مصنع المكونات لإنشاء المكون داخل حاوية العرض.
• اختياري: قم بتعيين قيم لمدخلات المكون إذا كانت تحتوي على أي منها.

import {AfterViewInit, Compiler, CompilerFactory, Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
import {CommonModule} from '@angular/common';
import {JitCompilerFactory} from '@angular/platform-browser-dynamic';

@Component({
    selector: 'app-parent',
    template: '<div #container></div>'
})
class ParentComponent implements AfterViewInit {
    @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
    constructor(private compiler: Compiler) {}

    ngAfterViewInit() {
        // Must clear cache.
        this.compiler.clearCache();

        // Define the component using Component decorator.
        const component = Component({
            template: '<div>This is the dynamic template</div>',
            styles: [':host {color: red}']
        })(class {});

        // Define the module using NgModule decorator.
        const module = NgModule({
            declarations: [component]
        })(class {});

        // Asynchronously (recommended) compile the module and the component.
        this.compiler.compileModuleAndAllComponentsAsync(module)
            .then(factories => {
                // Get the component factory.
                const componentFactory = factories.componentFactories[0];
                // Create the component and add to the view.
                const componentRef = this.container.createComponent(componentFactory);
            });
    }
}

بعض الأشياء التي يجب وضعها في الاعتبار:

• تذكر استدعاء clearCache على المترجم. إذا لم تقم بذلك ، فستتمكن فقط من تقديم المكون الخاص بك مرة واحدة. عندما تحاول تجميعه في المرة الثانية ، سيشتكي Angular من نفس المكون الموجود في وحدتين مختلفتين.
• ليس عليك استخدام فئات مجهولة في تعريفات المكونات والوحدات النمطية. لقد استخدمت بالفعل الفصل الدراسي الذي أمتلكه بالفعل في طلبي للإعلان عن المكون.
• المترجم غير متاح عادة إذا تم تجميع التطبيق باستخدام مترجم AOT. لحل هذه المشكلة ، يتعين علينا توفير المترجم بشكل صريح:

export function createCompiler(compilerFactory: CompilerFactory) {
    return compilerFactory.createCompiler();
}

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [],
    providers: [
        // Compiler is not included in AOT-compiled bundle.
        // Must explicitly provide compiler to be able to compile templates at runtime.
        {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
        {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
        {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}    ],
    declarations: []
})
export class CoreModule {}

لدي مشكلة مع هذا الحل ، لا يمكنني إضافة خدمة

وبعد ذلك قمت بخدمة - aot وأنا أتلقى هذا الخطأ ، كيف يمكنني حقن خدمة البيانات في مكون وقت التشغيل؟

jalbatrossCharlesElGriego الرجال، وأنا سعيد لأنه ساعد شخص ما (وآسف أنها لا تعمل من أجل الآخرين). كان لدي حالة استخدام ضيقة جدًا في هذا المشروع المحدد الذي بحثت فيه ووجدت الحل. بعد ذلك مباشرة تقريبًا ، انتقلت إلى مشروع آخر (أنا مقاول) ، ولم أستخدم Angular منذ أكثر من عام الآن (ولسوء الحظ ليس لديّ نصف ساعة إضافية للقيام ببعض التجارب). لسوء الحظ ، jalbatross ، لن أتمكن من تقديم نصيحة متعلقة بـ Angular. ومع ذلك ، فأنا من أشد المؤيدين لفكرة أنه إذا كان من الصعب للغاية القيام بشيء باستخدام أداة معينة ، فهناك احتمال كبير أنني قد أستخدم الأداة الخاطئة. بالصدفة كان لدي مهمة مماثلة (تجميع قالب عشوائي في وقت التشغيل) في مشروع آخر ، لكن هذه المرة تجنبت استخدام Angular في الوظيفة. بدلاً من ذلك ، استخدمت React + JSX + Babel:

import * as Babel from '@babel/standalone';

const compiled = Babel.transform(
    '<div>Content</div>',
    {presets: ['react']}
).code;

إذا كانت القوالب الخاصة بك بحاجة ماسة إلى أن تكون في صيغة Angular ، فليس لدي أي اقتراح لك. ومع ذلك ، إذا كنت مرنًا بشأن التنسيق ، فيمكنك التفكير ، لا أعرف ... الفكرة المجنونة للواجهات الدقيقة وإنشاء جزيرة صغيرة من React (preact؟) في بحر Angular؟

CharlesElGriego صورك لا تكفي للفهم. إذا كنت تريد حقًا التحدث عن ذلك بجدية ، فقم بإنشاء مشروع استنساخ بسيط قدر الإمكان على Github ، والذي يركز فقط على مشكلة واحدة والتي يمكن استنساخها وتشغيلها.

تضمين التغريدة
شيء يمكنك القيام به هو تمرير الخدمة من السياق حيث تقوم بإنشاء المكون الخاص بك. ثم قم بتعيين هذا المتغير إلى مثيل المكون الذي تم إنشاؤه ديناميكيًا.

   // This is from the parent component
   constructor(private service1: service1) {

   } 
    ngAfterViewInit() {
        // Must clear cache.
        this.compiler.clearCache();

        // Define the component using Component decorator.
        const component = Component({
            template: '<div>This is the dynamic template</div>',
            styles: [':host {color: red}']
        })(class {
              // Makes service1 available in the created controller scope
              private dynamicAssignedService: service1;
              constructor() {
                console.log("Got service: ", dynamicAssignedService);
               }

             });

        // Define the module using NgModule decorator.
        const module = NgModule({
            declarations: [component]
        })(class {});



        // Services you need here 
        let sharedService = this.service1;

        // Asynchronously (recommended) compile the module and the component.
        this.compiler.compileModuleAndAllComponentsAsync(module)
            .then(factories => {
                // Get the component factory.
                const componentFactory = factories.componentFactories[0];
                // Create the component and add to the view.
                const componentRef = this.container.createComponent(componentFactory);

                // Assign the service to the component instance
                componentRef.instance.dynamicAssignedService = sharedService;
            });
    }
}

أهلا! شكرًا جزيلاً على مساعدتك jalbatross و @ alarm9k
لقد قمت أيضًا بإنشاء الريبو بناءً على إجاباتك
https://github.com/CharlesElGriego/angular-aot-dynamic-components

CharlesElGriego شكرا على ذلك. ربما كان يجب أن أذكر من قبل لكني كتبت مقالًا حول هذه الحالة منذ فترة. يوجد أيضًا رابط إلى الريبو مع المثال.
https://www.linkedin.com/pulse/compiling-angular-templates-runtime-dima-slivin/

مرحبًا jalbatross ، CharlesElGriego ، @ alarm9k ،

هل تمكنت أيضًا من إيجاد حل لاستخدام templateUrl بدلاً من template ؟

لا يمكنني تشغيله باستخدام templateUrl ، لأن angular لا يمكنه تحميل الترميز. كيف يمكنني تنفيذ هذا برمجيًا؟

ERROR Error: Uncaught (in promise): Error: Component 'Foobar' is not resolved:
 - templateUrl: ./foobar.component.html
Did you run and wait for 'resolveComponentResources()'?

أي مساعدة سيكون محل تقدير كبير!

انتظر Angular 9 (Ivy) الذي سيكون الحل الحقيقي والأفضل لحل هذه المشكلة التي نشرتها منذ ما يقرب من عامين.
مشكلتي هي في الواقع طلب لمكونات "عالية المستوى وديناميكية" والتي يمكن تنفيذها الآن بسهولة في Angular 9 (Ivy) - والتي كانت أيضًا لا تحتاج إلى تفكير في AngularJS.

knafteN بصراحة ، أشك في أن هذا ممكن. لم ألق نظرة على رمز Angular المسؤول عن ذلك ، لكنني أشك في أن عناوين URL للقالب يتم حلها في وقت الإنشاء وأن العملية نفسها منفصلة عن تجميع القوالب ، وبالتالي لا علاقة لها بالمترجم.

ما نوع حالة الاستخدام التي تتطلب منك استخدام عناوين URL للقوالب لتجميع القوالب في وقت التشغيل؟

شكرا لتعليقاتك KarlXOL و @ alarm9k

أنا أبحث عن بعض الآليات التي تمكنني من استخدام قوالب html مختلفة لنفس المكون. في الوقت الحالي ، أستخدم نموذجًا واحدًا فقط مع عبارة switchCase ، لكن هذا الأسلوب قبيح إلى حد ما وينفخ الكود بشكل غير ضروري.
أحتاج إلى هذا لأن لديّ عميلين ، يريدان تطبيق دليل أسلوبهم الخاص وتخطيطهم. المنطق يبقى كما هو.

تم تنفيذ هذا السلوك بالفعل (بطريقة ما) في https://github.com/NativeScript/NativeScript. هناك يمكن أن يكون لديك ملف component.ts واحد وملفات قالب html متعددة (مثل component.html و component.tns.html ). يتم تحميل ملف tns.html هذا عن طريق الاصطلاح ولكني لا أعرف أين وكيف أنشئ هذا السلوك بنفسي في مشروعي الزاوي.
المرجع: https://docs.nativescript.org/code-sharing/code-splitting

انتظر Angular 9 (Ivy) الذي سيكون الحل الحقيقي والأفضل لحل هذه المشكلة التي نشرتها منذ ما يقرب من عامين.
مشكلتي هي في الواقع طلب لمكونات "عالية المستوى وديناميكية" والتي يمكن تنفيذها الآن بسهولة في Angular 9 (Ivy) - والتي كانت أيضًا لا تحتاج إلى تفكير في AngularJS.

مرحبًا ، هل لديك وثائق توضح كيفية تعامل Angular 9 مع هذا الأمر؟ شكرا

مرحبًا jalbatross ، CharlesElGriego ، @ alarm9k ،

هل تمكنت أيضًا من إيجاد حل لاستخدام templateUrl بدلاً من template ؟

لا يمكنني تشغيله باستخدام templateUrl ، لأن angular لا يمكنه تحميل الترميز. كيف يمكنني تنفيذ هذا برمجيًا؟

ERROR Error: Uncaught (in promise): Error: Component 'Foobar' is not resolved:
 - templateUrl: ./foobar.component.html
Did you run and wait for 'resolveComponentResources()'?

أي مساعدة سيكون محل تقدير كبير!

لدي نفس المشكلة مع أنماط المغلق

يجبknafteNCharlesElGriego أن نفكر في هذا من HOCs جهة نظر (عالية ترتيب مكونات)، كما ذكرKarlXOL. يأتي Ivy مع إمكانية إنشاء HOC (مكونات تعيد مكونات جديدة) قريبًا ، وهو ما لم يكن ممكنًا في Angular API الفعلي ، أو كان معقدًا للغاية.

فكرة أنك تأخذ أي كود HTML ودمجه مع نوع / مثيل مكون موجود ليس لها معنى في وقت التشغيل. تذكر أن أحد مبادئ البنية الرئيسية هو القدرة على التنبؤ بالسلوك في وقت التشغيل وضمان استقرار التطبيق. إن أخذ أي HTML من مكان ما في الخارج ، واستخدامه دون أي طريقة مضبوطة هو مجرد تجربة عمياء ، وقد يكون قابلاً للاستخدام في وضع التطوير ، ولكن بالتأكيد ليس في بيئة الإنتاج.

إن أخذ أي HTML من مكان ما بالخارج ، واستخدامه دون أي طريقة مضبوطة هو مجرد تجربة عمياء ، وقد يكون قابلاً للاستخدام في وضع التطوير ، ولكن بالتأكيد ليس في بيئة الإنتاج

هل تقول أنه لا توجد حالات استخدام صالحة لتجميع HTML عشوائي في وقت التشغيل؟ إذا كان هذا ما تعنيه ، إذن ... حسنًا ، هناك الكثير من حالات الاستخدام لذلك. معظمهم لهم علاقة بقوالب HTML التي تم إنشاؤها وإرسالها إلى نظامك من قبل المستخدم.

@ alarm9k نعم ، أعرف ما

إذا كنت تتحدث عن تحليل HTML عشوائي ، فعليك أيضًا أن تتذكر التجميع والارتباطات بأجزاء أخرى من التعليمات البرمجية. ومن أجل ذلك ، تحتاج أيضًا إلى مترجم في وقت التشغيل ، ومعه ، عدنا إلى الإصدار الفعلي من Angular.

تعمل المكوّنات ذات الترتيب الأعلى بطريقة مختلفة. إنها واجهة برمجة التطبيقات (API) التي تسمح لك بالقيام بذلك ديناميكيًا في وقت التشغيل ، خطوة بخطوة ، جزء تلو الآخر وبطريقة مسيطر عليها ، لذلك لا تحتاج إلى مترجم لها.

تعمل المكوّنات ذات الترتيب الأعلى بطريقة مختلفة. إنها واجهة برمجة التطبيقات (API) التي تسمح لك بالقيام بذلك ديناميكيًا في وقت التشغيل ، خطوة بخطوة ، جزء تلو الآخر وبطريقة مسيطر عليها ، لذلك لا تحتاج إلى مترجم لها.

إذن هذه هي الطريقة الجديدة لإنشاء مكونات ديناميكية؟ أحتاج إلى الحصول على CMS Html من مدير CMS مقطوع الرأس

CharlesElGriego لم يتم نشر واجهة برمجة تطبيقات

لذا لا توجد في الوقت الحالي إمكانية لتحقيق التقسيم التالي ، باستخدام ملف واحد فقط .ts -file؟

• app.component.ts (في حالة وجود بعض الشروط -> استخدم اللون الأحمر وإلا استخدم اللون الأزرق)
• app.component.red.html
• app.component.blue.html

لا يجب أن يكون في وقت التشغيل ، أريد فقط السلوك الديناميكي لتقسيم الكود.

knafteN ربما يكون ذلك في بعض الحالات الإضافية لأن templateUrl يقبل المشغل الثلاثي ، مثل:

templateUrl: config.type === 1 ? 'red.html' : 'blue.html',

لكن الشرط يجب أن يتم تحليله بشكل ثابت لأن Angular compiler لا يقوم بتشغيل أي كود أثناء مرحلة التجميع. لكن هذا لا يحل السلوك الديناميكي ، فلا يزال يتم تقييمه بشكل ثابت أثناء عملية AOT.

شكرًا @ mlc-mlapis ، يعمل المتغير الخاص بك ، ولكن استخدام تعبير بدلاً من الثابت يكسر دعم IDE لملفات html ، لأن vscode / webstorm لا يمكنه تقييم templateUrl ولا يمكنه معرفة ملف html المستخدم للمكون :(

knafteN Yep ، هذا نوع آخر من المشكلات ، لا يرتبط مباشرة بـ Angular نفسه ، ولكنه لا يزال مقيدًا من وجهة نظر مطور. سبب وجودها هو حقيقة أن هذه الحالة نادرًا ما يتم استخدامها ، لذلك لم يتم تنفيذها بعد في هؤلاء المحررين. حتى الآن ، الطريقة الواقعية الوحيدة لكيفية استخدام قوالب HTML الديناميكية في أوقات التشغيل هي حقن JitCompiler في تطبيق AOT وتجميعه ديناميكيًا ، حتى هذه الطريقة غير موصى بها بسبب أسباب الأداء والأمان ، وانتظر واجهة برمجة تطبيقات HOC جديدة في Angular 9.x (لأنه لن يكون متاحًا في الإصدار الأول من 9.0 بالتأكيد).

هل هناك أي إرشادات من فريق Angular عند / إذا عادت هذه الوظيفة؟ بينما التعليقات المتعالية (إذا كنت بحاجة إلى هذه الميزة ، فأنت لا تعرف كيفية البرمجة) قد تجعل المؤلفين يشعرون بالرضا - فهم لا يجيبون على السؤال حقًا. نمنح مستخدمي التطبيق القدرة على تخصيص الصفحات - والآن ليس لدينا ميزة كانت ميزتنا التنافسية لسنوات!

أحتاج إلى هذه الميزة لحالة استخدام مختلفة تمامًا وصالحة (IMHO). أنا أقوم بتطوير منتج. يُنشئ إطار العمل المطوَّر الخاص بي نماذج على جانب الخادم ويتم إجراء العرض أيضًا هناك (أو يمكننا تسميته الخلفية). هذا له العديد من المزايا بالنسبة لي والتي قد نبقيها خارج هذه المناقشة.

الآن ، في الصفحة التي يريد فيها المستخدم البحث عن المنتجات المذكورة ومنطق العمل هو أنه يمكنهم تعيين عناصر مختلفة في معايير البحث بناءً على أذوناتهم في النظام. على سبيل المثال ، قد يكون أحد المستخدمين قادرًا على التصفية حسب النطاق السعري والآخر ليس في حين أن المستخدم الثاني قد يكون قادرًا على التصفية حسب "التاريخ المضاف في النظام" والأول لا يمكنه ذلك.

في هذه الحالة ، أرغب في تحميل نموذج معايير البحث هذا من الواجهة الخلفية الخاصة بي وربط عناصره بنموذج. لقد نجح الأمر نفسه بشكل جيد مع Angular 1.x الذي طورته في عام 2012 أو نحو ذلك. كانت عناوين URL الخاصة بقالب التوجيه عبارة عن عناوين URL لـ http وتستخدم الواجهة الخلفية لإرجاع النموذج بناءً على أذونات المستخدم الذي قام بتسجيل الدخول. الآن ، لا يبدو ذلك ممكنًا مع Angular.
لقد حاولت أيضًا مع React حيث لم يكن ذلك ممكنًا مرة أخرى. (لا أريد استخدام babel / standalone لأسباب تتعلق بالأداء في الإنتاج).
أنا مندهش من الوصول إلى مثل هذا الطريق المسدود مع كل من تقنيات الواجهة الأمامية الأكثر شعبية حاليًا.

يبدو أن العودة إلى AngularJS (1.x) يصعب تبريرها.

harishrohaj هناك اتجاه عام لعدم تصحيح كود HTML مباشرة (ليس فقط في Angular نفسها) ، بسبب الاحتمال المحدود للغاية لاختبار مثل هذه السيناريوهات (التطبيق لا يعرف أبدًا ما الذي سيتم تصحيحه على الإطلاق) وكل هذه الأشياء الديناميكية غير المتوقعة تنخفض الاستقرار المتوقع لمثل هذه التطبيقات.

@ mlc-mlapis أفهم وجهة نظرك.
في الواقع ، لقد كانت طريقة / ميزة صالحة في وقت سابق (في AngularJS) ، لذلك من الصعب بعض الشيء التفكير في ذلك كمستخدم.
لكنني الآن أفكر بما يتماشى مع الفكرة وأعتقد أنه يمكنني حل المشكلة في حالتي من خلال إنشاء بعض المكونات التي يمكنها إنشاء نموذج من بعض المعلومات الخاصة بالعناصر المطلوبة فيه وربط العناصر بالنماذج.

harishrohaj نعم ، أفهم أن التحول من AngularJS إلى Angular ، لا سيما كيف يرى الرأس تلقائيًا النموذج التحليلي ، ليس بالأمر السهل. أعتقد أنك على الطريق الصحيح الآن. 👍

@ حركة تحرير الكونغو mlapis - انها ليست مجرد التحول من AngularJS ... وكانت هذه الوظيفة متوفرة حتى الزاوي 5، ومن ثم إزالتها. وقد يكون هناك أو لا يكون هناك "اتجاه عام لعدم تصحيح كود HTML مباشرة" (لا أرى مثل هذا الاتجاه على الإطلاق) - إنها الوظيفة التي تحتاجها معظم منتجات موردي البرامج المستقلين (ISV) ولديها اليوم.

لذا فإن السؤال الحقيقي هو ما إذا كانت هذه الوظيفة موجودة في 9 (وغير موثقة) ، سواء كانت ستعود في أي وقت قريب ، أو ربما يأتي شخص ما مع بعض الإضافات من نوع CKEditor.

virshu لا يزال هنا نفس الوظيفة كما كان من قبل. هذا يعني أنه لا يزال بإمكانك تحميل JitCompiler داخل تطبيق AOT المجمع ثم تجميع الوحدات النمطية وقوالب HTML ديناميكيًا. ولا يزال غير موصى به للأسباب الموضحة أعلاه.

هناك شيء آخر في اللعبة يمكن أن يكون بعض الميزات الجديدة في Ivy (لا تزال غير متوفرة للإنتاج ويتم تنفيذها للاستخدام الداخلي حتى هذه اللحظة) وواجهة برمجة التطبيقات ، والتي تسمح باستخدام مفهوم HoC أو إنشاء ديناميكي أكثر مرونة للمكونات ، والتي يعتمد عليها فريق Angular عمل.

@ mlc-mlapis - يصادف اليوم مرور ثلاث سنوات على بدء هذا الموضوع. ومن البداية ، تحاول تغيير سؤال محدد جدًا (هل من الممكن تحميل النماذج ديناميكيًا) إلى مناقشة تستند إلى الرأي (لا يُنصح بذلك ؛ إنها ممارسة سيئة ؛ أيا كان).

نظرًا لبيانك غير الصحيح بشكل واضح ("لا يزال هنا نفس الوظيفة كما كان من قبل.") من الصعب أن تأخذ تعليقاتك الأخرى في ظاهرها. لذلك ، إذا أمكن ، اترك الأمر لأعضاء فريق Angular لتقديم معلومات واقعية

دوكوجي :)

virshu بصفتي البادئ في هذا الموضوع ، أتفق معك تمامًا. الوقت يمضي :-)
ما زلت آمل أن يكون هناك شيء ما في إصدارات Ivy القادمة من شأنه أن يوفر لنا حلاً

virshu همم ، ما الخطأ أو المضلل قلت؟ صيغتك كانت:

كانت هذه الوظيفة متاحة حتى Angular 5 ثم إزالتها

لقد ذكرت فقط أن It's still here the same functionality as before. It means that you can still load JitCompiler ... يعني أنه لم تتم إزالته وهو هنا كما كان من قبل لأن مفهوم AOT موجود هنا منذ اللحظة الأولى عندما ولدت Angular 2.

إذا أردت أن تقول أن التصحيح الديناميكي المباشر لـ HTML كان متاحًا في AngularJS ، لكنه ليس في Angular على الإطلاق ، فأنت على حق ، لكنها قصة أخرى في ذلك الوقت.

أنا أيضا.

يوم الخميس ، 19 مارس 2020 ، الساعة 1:55 صباحًا ، كتب KarlXOL [email protected] :

virshu https://github.com/virshu كبادئ لهذا الموضوع ، أنا
أتفق معك تمامًا. الوقت يمضي :-)
ما زلت آمل أن يكون هناك شيء ما في إصدارات Ivy القادمة من شأنه
تقدم لنا حلا

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/angular/angular/issues/15275#issuecomment-601002102 ،
أو إلغاء الاشتراك
https://github.com/notifications/unsubscribe-auth/AAFMV7QNGXRPZZIHZSQSQ2TRIGXUJANCNFSM4DEFOTBA
.

+1

لقد كنت مرتبطًا بهذا الخيط لفترة طويلة ، وعلى الرغم من أنني أرغب في رؤية مكون به html ديناميكي ، فأنا لا أخشى أن أغير رأيي لأصبح "زاوية أكثر". في حالة مثالية ، أتوقع من هذا الموضوع شيئًا مثل أفضل الممارسات في المواقف التي يكون فيها استخدام لغة تأشير النص الفائق الديناميكي أسهل طريقة .

لنتخيل مثالاً (مثال أكثر شمولاً ، ليس hello world لـ html الديناميكي ، يمكن للمستخدمين الآخرين إضافة المزيد من التفاصيل). : التفكير:
_ أقوم بإنشاء نظام بورصة حيث ستؤدي كل علامة عملة (مثل AUD) أو مؤشر (Dow Jones) أو سعر الصرف (EUR / USD) أو رابط لمستخدم أو مقالة (@ user أو # article_id) إلى تحويل هذه العلامات في مكونات زاويّة بوظائف مختلفة. سيتم تحرير المقالات من قبل المستخدمين أنفسهم وتخزينها في قاعدة بيانات. يجب أن يعرض النظام المقالة محملة بجميع المكونات.

منطقيا ، سيكون الحل البسيط هو المكونات ذات المحتوى الديناميكي الذي تم تحميله من قاعدة البيانات.
هل يمكن لشخص من Angular Team (_عذرًا ، سيكون هذا خارج إمكانياتي_) كتابة مقال على مدونة Angular (نظرًا لعدم نشر أي مقال منذ فترة طويلة) ، وكيفية تحقيق هذا الحل باستخدام القوالب Angular والديناميكية الحالية (_ شيء مثل الطريقة الأفضل ولكن غير الموصى بها _) ، فلماذا يكون هذا الحل خاطئًا (أتوقع شيئًا مثل الاختبار السيئ ، وكفاءة أسوأ ...) وكيف يمكننا تغيير (تصميم؟) تطبيق ليكون متوافقًا مع Angular التصميم (إذا كان من المستحسن عرض مثل هذا التطبيق باستخدام Angular).

النتيجة المثالية من مشاهدة هذا الخيط (نظرًا لأن Angular ، كما هو مذكور هنا ، جعلت هذا الأمر ممكنًا دائمًا) ستكون بالنسبة لي مثالًا على كيفية القيام بذلك ديناميكيًا (بطريقة خاطئة) ، وكيف ينبغي ترميزها بشكل صحيح ، وفقًا لـ Angular نهج . أعتقد أن هذا يمكن أن يكون موضوعًا مثيرًا للاهتمام لفريق Angular على المدونة ، ويمكن أن يكون لمثل هذه المقالة استجابة إيجابية إلى حد ما (على الأقل علم الجميع هنا كيفية القيام بذلك بشكل صحيح). إذا وصفت هذه المقالة بشكل كافٍ كيفية القيام بذلك ، فربما يمكن إغلاق هذا الموضوع: ابتسم: (أعلم ، هذا بيان جريء).

باستخدام الزاوية من الإصدار 2 في مشروع المؤسسة ، لم تكن هناك حالات استخدام لميزة مثل "تحميل القالب الديناميكي" أغلق هذه المشكلة أخيرًا

باستخدام الزاوية من الإصدار 2 في مشروع المؤسسة ، لم تكن هناك حالات استخدام لميزة مثل "تحميل القالب الديناميكي" أغلق هذه المشكلة أخيرًا

مرحبًا ، أعتقد أنك مخطئ ... في التعليقات السابقة ، أضفت "حلًا" لهذا ، أعلم أنه ليس الأفضل ولكن كان علي اتباع هذا النهج لأنه لا توجد حاليًا طريقة لتنفيذ نظام CMS مقطوع الرأس باستخدام Angular. .. يأتي نموذج HTML الخاص بي من CMS (Umbraco)

CharlesElGriego ما هو الحل الخاص بك؟ هل يمكنك شرح خطتك ويمكننا تكوين علاقات عامة معًا؟

CharlesElGriego ما هو الحل الخاص بك؟ هل يمكنك شرح خطتك ويمكننا تكوين علاقات عامة معًا؟

أوه لا العلاقات العامة ، إنه ليس حلًا أساسيًا ... إنه حل مع Jit Compiler ، إنه الشيء الوحيد الذي يمكنني العثور عليه لاحتياجاتي. لكنني ما زلت أبحث عن حل باستخدام aot ويمكنني استخدامه لـ Headless CMS

https://github.com/CharlesElGriego/angular-aot-dynamic-components

حل CharlesElGriego لحالتك ، هو منشئ تنفيذ لهيكل بيانات CMS بدون رأس ، باستخدام مكونات زاوية ، يجب ألا يحتوي المكون على قالب ديناميكي ، لأنه سيكون سلوكًا غير متسق للمكون!
all سيكون من الأفضل بدء البرمجة ، بدلاً من عدم الإعجاب

جي ، djleonskennedy - محاولاتك المتكررة لتحويل سؤال واضح وعملي إلى مناقشة لا طائل من ورائها! يرجى الحصول على دليل. сли 14 еловек говорят то то пьян، надо идти спать!

virshu تقليص وجهك من فضلك

من فضلكم ، أيها السادة ، هذه الإجابات لن تدفعنا إلى الأمام. أرى أننا لن نتحرك دون استجابة من فريق Angular core. أعتذر مقدمًا إذا أشركت شخصًا ما في محادثة لا تهمهم ، لكنني أعتقد أن kara يمكن أن تقدم لنا نصيحة تركز على جزء IVY ، لدى maxkoretskyi و @ shmool عروض تقديمية مثيرة للاهتمام حول الأجزاء الديناميكية في الزاوية و قال bradlygreen (في

سأحاول تلخيص هذه المناقشة بطريقة مبسطة إذا كان بإمكانك التعليق على هذا الموضوع (فيما يتعلق بواجباتك في ng-conf).

• نود استخدام قالب ديناميكي (تم استرداده من قاعدة بيانات يمكن تحريرها بواسطة مستخدمي التطبيق) للمكونات في التطبيقات الزاوية
• إذا لم أكن مخطئًا ، فإن الخيارات الحالية تضيف مترجمًا (وربما التفاف العناصر الزاوية إلى تطبيق آخر) - هذا حل أخرق بعض الشيء ، لكن لا يوجد مثال رسمي ،
• هل يمكنك إخبارنا ما هو النهج الموصى به / الصحيح إذا احتجنا إلى تحقيق نموذج تم إنشاؤه ديناميكيًا باستخدام IVY؟
• إذا لم يكن ذلك ممكنًا ، فكيف يمكننا تعديل تصميم مثل هذا التطبيق لمطابقة النهج الزاوي؟

مقال حول هذا الموضوع في مدونة الزاوية سيكون بالتأكيد فكرة رائعة. (مع مثال على كيفية القيام بذلك بشكل صحيح باستخدام IVY ، و / أو كيفية تعديل تطبيقاتنا لجعلها أفضل من حيث تصميم التطبيق لتجنب مثل هذا المطلب ، إذا كنت تعتقد أن هذا النهج غير مبرر أبدًا.)

شكرا جزيلا لك مقدما على ردك

مرحبًا بالجميع ، أشارني ميشيل إلى هذا المقال المثير للاهتمام حول IVY HOC بواسطة Manfred. يوجد جزء إضافي في نهاية هذه المقالة يسمى "التحويل البرمجي في وقت التشغيل". ليس لدي الكثير من الوقت الآن ، ولكن ربما يمكن لشخص ما أن يحاول إنشاء عرض توضيحي ، إذا تمكنا من إنشاء مكون وظيفي كامل باستخدام هذا النهج ،

أجزاء مهمة من الكود:

import '@angular/compiler';

@Component({ template: '' }) 
class HigherOrderComponent { [...] }

ɵcompileComponent(HigherOrderComponent, { template: '<b>Hello</b>' });

يمكنك إلقاء نظرة عليه: https://stackblitz.com/edit/angular-ivy-minimal-3

@ mlc-mlapis هل سيعمل هذا عندما 'ng build --prod'؟ أيضًا ، رأيت مثالك يعرض الاسم مرة واحدة ولكن لم أتمكن من تحديثه عند تغييره من الإدخال. هل كان هناك شيء مفقود؟

atiris أحب الطريقة التي طرحت بها السؤال. بدلاً من مناقشة ما إذا كان التنفيذ الذي نريده صحيحًا أم لا ، اطلب من المطورين توضيح الطريقة الصحيحة لحل المشكلة. جيد لك ونأمل أن نرى الحركة قريبًا (اعتمادًا على ما إذا كان HOC هو الجواب أم لا).

jqsjqs إنه مجرد مثال بسيط عن واجهة برمجة التطبيقات الداخلية ، التي لم يتم نشرها بعد ، بسبب التوافق الفعلي مع الإصدارات السابقة. ليس لدي معلومات دقيقة حول الجدول الزمني عندما يكون هذا متاحًا كواجهة برمجة تطبيقات عامة وأيضًا بالشكل الدقيق. أيضًا ، لا يتم تطبيق NgZone هنا ، ولهذا السبب لا يتم تحديث العرض عند تغيير النموذج. عرض فقط -> نموذج اتجاه يعمل.

إذا كان أي شخص لا يزال غير متأكد من "حالة الاستخدام في العالم الحقيقي" بشأن هذا ، فقد واجهت واحدة ، وأحتاج إلى إجابة:
أنا أعمل في شركة تنشئ برنامجًا يتعامل مع مستأجرين متعددين في وقت واحد على نفس الخادم. لقد تم إعطائي شرط إنشاء مكون زاوي يمكنه سحب القالب من طلب http. نحن بحاجة إلى هذا لأننا نسمح لعملائنا بتخصيص العروض (إعادة ترتيب div ، وتغيير الخصائص المعروضة ، وما إلى ذلك). تتيح لنا القدرة على تحميل النموذج عبر الطلب المرونة في إنشاء إصدار افتراضي ، يتم استبداله بعد ذلك بالإصدار "ذي الموضوع" إذا كان موجودًا.
افهم تمامًا أن الإصدار البديل من النموذج يمكنه بالفعل تعطيل التطبيق ، وهذه مخاطرة معروفة ومقبولة.

@ Nixon-Joseph لذا فأنت بحاجة إلى واجهة برمجة تطبيقات لهذا المكون (على سبيل المثال استنادًا إلى JSON) تسمح للعميل بتعديل سلوك القالب الافتراضي (يدعم المكون داخليًا واجهة برمجة التطبيقات هذه) أو تحتاج إلى تحديد مجموعة من خصائص الإدخال المرتبطة (باستخدام مزايا اكتشافات التغيير المنفصلة) أو التوقعات القائمة على \و \لأجزاء منفصلة من القالب.

من المحتمل أن تكون الجملة Fully understand that the alternate version of the template could indeed break the application, and that is a known and accepted risk. هي سبب سوء الفهم الرئيسي بالمقارنة مع وجهة نظر فريق Angular الأساسية المعمارية. ببساطة ، من غير المقبول من جانبهم تقديم أي شيء لا يمكن ضمانه بجدية من وجهة نظر الأداء / الاستقرار / الاختبار. حتى لو أعلنت أنها مخاطرة مقبولة من جانبك ، فإنها لا تؤثر على القرار النهائي.

@ Nixon-Joseph - قد تكون مهتمًا بإلقاء نظرة على النهج الذي اتبعناه في التطبيق الذي يعمل على تشغيل angular.io. يتم تحميل كل صفحة من المحتوى ديناميكيًا (عبر HTTP) ويتم إنشاء مثيل لها في DOM ، باستخدام Angular Elements للسماح بتضمين سلوكيات ديناميكية معينة في المحتوى الثابت. راجع https://github.com/angular/angular/blob/master/aio/src/app/layout/doc-viewer/doc-viewer.component.ts#L131 -L153

@ mlc-mlapis أقدر ردك.
pedroclayman يبدو هذا مثيرًا للاهتمام ، فهل يسمح

لقد وجدت بالفعل حلاً يناسبنا ، ولكن الجانب السلبي الوحيد هو أنه يتعين علينا تعطيل تجميع AoT لهذا المشروع.
بالنسبة لأولئك الذين يأتون بعدي ويريدون نفس الشيء - إليك نظرة عامة سريعة على ما أفعله في النهاية.
أولاً ، وجدت أساس الحل الخاص بي هنا: https://stackblitz.com/edit/mlc-app-init-zyns9l؟

import { Component, NgModule, Compiler, ViewContainerRef, Type } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from '../modules/shared.module';

export class DynamicComponentHelper {
    public static addComponent<ViewModelType = any>(compiler: Compiler, container: ViewContainerRef, template: string, viewModel?: ViewModelType, components: Array<Type<any>> = []): void {
        @Component({ template: template })
        class DynamicComponent {
            public vm: ViewModelType = viewModel;

            constructor() { }
        }
        components.push(DynamicComponent);
        @NgModule({
            imports: [BrowserModule, SharedModule],
            declarations: components
        })
        class DynamicComponentModule { }

        const mod = compiler.compileModuleAndAllComponentsSync(DynamicComponentModule);
        const factory = mod.componentFactories.find((comp) =>
            comp.componentType === DynamicComponent
        );
        const component = container.createComponent(factory);
    }
}

لدي بعد ذلك مكون يطلق عليه هكذا ...

export interface VM { text: string; }

@Component({
    selector: 'app-component',
    template: `<ng-template #dynamicComponent></ng-template>`
    ...
})
export class VariationsComponent implements OnInit, AfterViewInit {
    @ViewChild('dynamicComponent', { read: ViewContainerRef }) _container: ViewContainerRef;

    private vm: VariationsComponentVM = { text: 'Hello World' }

    private viewInitialized: boolean = false;
    private componentTemplate: string;

    constructor(private compiler: Compiler) { }

    ngAfterViewInit(): void {
        this.viewInitialized = true;
        this.setUpDynamicComponent();
    }
    ngOnInit(): void {
        this.httpService.getComponentTemplate().subscribe(template => {
            this.componentTemplate = template;
            this.setUpDynamicComponent();
        });
    }

    private setUpDynamicComponent(): void {
        if (this.viewInitialized === true && this.componentTemplate) {
            DynamicComponentHelper.addComponent(this.compiler, this._container, this.componentTemplate, this.vm, [NestedComponent]);
        }
    }
}

ومن ثم يمكن أن يكون النموذج الفعلي المستخدم بسيطًا مثل ...

<div>{{ vm.text }}</div>
<app-nested [input]="vm.text"></app-nested>

الجزء الأكبر في هذا ، هو كل ما تم إنشاؤه في أعمال قوالب الزوايا ، وجميع التوجيهات وكل شيء. مرة أخرى ، الجانب السلبي الوحيد هو أنك يجب أن تفقد AoT. هل من الممكن / هل من الممكن تعطيل AoT على مستوى المكون؟ سيكون من الرائع لو تمكنا من تجميع غالبية المشروع في AoT ، ولكن ترك مشروعًا محددًا.

الآن يجب أن تكون أوامر البناء الخاصة بي:
ng build ProjectName --aot=false
و
ng build ProjectName --prod --aot=false --build-optimizer=false

@ Nixon-Joseph Yep ، لقد كان العرض التجريبي التاريخي الذي أنشأته منذ وقت طويل. بشكل عام ، يجب أن تكون قادرًا على إنشاء تطبيقك في وضع AOT كالمعتاد ، بالإضافة إلى ذلك ، يجب عليك إدخال JitCompiler (تتم مناقشة هذا الموضوع في بعض مشكلات Angular GitHub مع الشفرة التجريبية) واستخدامها لتجميع القوالب المخصصة ديناميكيًا. لذا أخيرًا يمكنك الحصول على حل مشترك لـ AOT + JIT معًا. لا يزال الأمر غير مثالي ، حتى أنه لا يوصى به من فريق Angular الأساسي ، مرة أخرى بسبب أسباب الأداء / الأمان / الاستقرار ، ولكنه يعمل. أوصي أيضًا بالاستثمار في بعض الاحتمالات الموسعة للواجهة القابلة للتخصيص للمكونات وعدم السماح بتصحيح كود HTML دون أي تحكم. يمكن لـ JitCompiler إيقاف استخدام بعض القوالب غير الصالحة من حيث المبدأ ، لكنها مع ذلك طريقة غامضة للغاية لدعم أي عميل.

@ mlc-mlapis أشكركم على تعليقاتكم. أرغب في دمج ما أراه في وظيفة .render مع ما نقوم به. لكنني لا أعتقد أن لدي فهمًا جيدًا بما يكفي حول متى / كيف يمكنني المضي قدمًا. هدفي الرئيسي هو أن أتمكن من الاستمرار في استخدام AoT ، وتحميل المكون الديناميكي عبر القالب المسترجع. في وضع الإنتاج ، إذا لم أستخدم AoT ، فإن المشروع (جميع الملفات مجتمعة) يبلغ حوالي 2 مليون ، ولكن مع AoT ، يكون أقل من 800 ألف. إذا حاولت تجميع الحل الخاص بي من AoT ، فسيظهر أخطاء في الجزء @Component من addComponent .
هل سيكون من الممكن بالنسبة لك تقديم مثال سريع لما سيبدو عليه الحل المقترح؟ سأكون سعيدًا لسحب هذه المحادثة بعيدًا عن هذا المداس حتى لا ننتفخه دون داع.

@ Nixon-Joseph ابدأ بـ angular / angular-cli # 17663 ، هذه هي المشكلة الفعلية مع `buildOptimizer` في CLI ، والتي لا تزال تسمح بتجميع AOT ولكن بدون تحسين اهتزاز الشجرة المكتمل. عرض الاستنساخ هو https://github.com/jcgillespie/ng-dynamic-optimized-repro ويمكن أن يساعدك في مفهومك ، حتى بدون تحسين الإنشاء في الإصدار الأخير الفعلي من Angular.

@ Nixon-Joseph ابدأ بـ angular / angular-cli # 17663 ، هذه هي المشكلة الفعلية مع `buildOptimizer` في CLI ، والتي لا تزال تسمح بتجميع AOT ولكن بدون تحسين اهتزاز الشجرة المكتمل. عرض الاستنساخ هو https://github.com/jcgillespie/ng-dynamic-optimized-repro ويمكن أن يساعدك في مفهومك ، حتى بدون تحسين الإنشاء في الإصدار الأخير الفعلي من Angular.

@ mlc-mlapis
هذه هي مشكلة الزاوي الآن. يؤدي كل طلب ميزة إلى مناقشة لا تنتهي أبدًا حول الأسباب الفنية المنخفضة والدنيا التي تجعل من الممكن القيام بشيء ما وفي كثير من الأحيان لا يمكن القيام به.
آسف على هذا اندلاع العاطفي. لكننا نحن المطورين ننتظر ميزات طال انتظارها (مثل هذه) والتي تتباطأ في كثير من الأحيان ولا تأتي.
الميزات الأخرى على سبيل المثال هي تحسينات في التحميل البطيء ، إلخ. يبدو أن الزاوي يفقد الأرض مقارنة بالمنصات الأخرى

أنا وربما كثيرين آخرين أقدر حقًا خارطة طريق ذات مغزى بشأن الميزات الزاويّة المخطط لها.
شكرا

إذا كان أي شخص لا يزال غير متأكد من "حالة الاستخدام في العالم الحقيقي" بشأن هذا ، فقد واجهت واحدة ، وأحتاج إلى إجابة:
أنا أعمل في شركة تنشئ برنامجًا يتعامل مع مستأجرين متعددين في وقت واحد على نفس الخادم. لقد تم إعطائي شرط إنشاء مكون زاوي يمكنه سحب القالب من طلب http. نحن بحاجة إلى هذا لأننا نسمح لعملائنا بتخصيص العروض (إعادة ترتيب div ، وتغيير الخصائص المعروضة ، وما إلى ذلك). تتيح لنا القدرة على تحميل النموذج عبر الطلب المرونة في إنشاء إصدار افتراضي ، يتم استبداله بعد ذلك بالإصدار "ذي الموضوع" إذا كان موجودًا.
افهم تمامًا أن الإصدار البديل من النموذج يمكنه بالفعل تعطيل التطبيق ، وهذه مخاطرة معروفة ومقبولة.

مرحبًا ، لدي حل على GitHub ، إنه يعمل أيضًا مع AOT :)
https://github.com/CharlesElGriego/angular-aot-dynamic-components

KarlXOL أفهمك . لكنني أعتقد أيضًا أنك غير منصف جزئيًا فيما يتعلق بالزاوية ككل. هناك بالتأكيد بعض الأجزاء المعقدة التي يمكن تصميمها بشكل أفضل ، لكنني أفهم جيدًا أيضًا أن التغييرات الفاصلة في تلك المناطق أكثر إشكالية ويجب إنشاؤها باهتمام كبير للغاية.

وهناك أيضًا أحد أحجار البناء الزاويّة الرئيسية ، وهو التحليل الثابت للمترجم الذي يكون في وضع مباشر ضد الترقيع الديناميكي المجهول للقوالب. طوال الوقت ، يفكر الكثير منا ويبحثون عن حل ذكي يرضي الطرفين دون تنازلات جادة وخطيرة.

@ mlc-mlapis
شكرا لإجابتك. إنني أقدر حقًا الوقت والعقل الذي تستثمره أنت وفريقك في الزاوية لتزويدنا بمنصة وبيئة شاملة "تشعر بالراحة". شكرا جزيلا على ذلك!
ولكن من ناحية أخرى خلال الأشهر الستة الماضية تقريبًا ، شعرت أن فريقك يكافح أكثر مع التعقيد والتبعيات ... الزاوي والنظام الأساسي والأدوات أكثر من القدرة على التركيز على ازدهار النظام الأساسي إلى الأمام.
يتباطأ ناتج الميزات للمطورين الذي يحتاجون إليه الأعمال اليومية. فقط لنأخذ Ivy كمثال يعمل حتى الآن خلف الكواليس ولم يصل إلى صندوق أدوات المطورين حتى الآن لتحسين تطوير التطبيق في العملية أو الجودة.

أراهن على الزاوي في الماضي وأود أن أفعل ذلك في المستقبل.

إذا كان أي شخص لا يزال غير متأكد من "حالة الاستخدام في العالم الحقيقي" بشأن هذا ، فقد واجهت واحدة ، وأحتاج إلى إجابة:
أنا أعمل في شركة تنشئ برنامجًا يتعامل مع مستأجرين متعددين في وقت واحد على نفس الخادم. لقد تم إعطائي شرط إنشاء مكون زاوي يمكنه سحب القالب من طلب http. نحن بحاجة إلى هذا لأننا نسمح لعملائنا بتخصيص العروض (إعادة ترتيب div ، وتغيير الخصائص المعروضة ، وما إلى ذلك). تتيح لنا القدرة على تحميل النموذج عبر الطلب المرونة في إنشاء إصدار افتراضي ، يتم استبداله بعد ذلك بالإصدار "ذي الموضوع" إذا كان موجودًا.
افهم تمامًا أن الإصدار البديل من النموذج يمكنه بالفعل تعطيل التطبيق ، وهذه مخاطرة معروفة ومقبولة.

مرحبًا ، لدي حل على GitHub ، إنه يعمل أيضًا مع AOT :)
https://github.com/CharlesElGriego/angular-aot-dynamic-components

CharlesElGriego شكرا على ذلك! يبدو واعدًا وقريبًا جدًا من المكان الذي كنت فيه بالفعل. يجب أن أكون قادرًا على تعديل الحل الخاص بي ليتوافق بشكل وثيق مع حلك وتجربته بسرعة كبيرة. أرى أن لديك مشكلة واحدة في الريبو تذكر أنها لا تقوم بتجميع aot في الإنتاج. سأرى ما يفعله لي وأبدأ من هناك.

KarlXOL @ KarlXOL في هذا الجانب. على الرغم من أنني أتفهم تمامًا وأحترم محاولة جعل Angular آمنًا ومستقرًا قدر الإمكان ، فلن يضر امتلاك ميزات (مثل الميزة المطلوبة) ، فقط ضعها بعيدًا قليلاً ، مع الوثائق التي تشير إلى عدم الاستخدام - سرد جميع الأسباب الوجيهة هنا.
هذا من شأنه أن يغطي كلتا الحالتين أليس كذلك؟ ما لم يستخدم شخص ما الميزة ، فلن يفقد أي استقرار. ولكن إذا اختاروا استخدامه ، فعليهم الإقرار بأنه مخالف للتوصيات.

هل سيتم توثيق هذا؟ أرغب في إنشاء جانب عميل لبرنامج WordPress مثل السماح للمستخدمين بوضع html على صفحة مثل مدونة. ولكن سيكون من الممتع السماح ببعض نماذج الربط. هل هذا الحل جيد أم مبتذل؟
https://stackoverflow.com/questions/46576727/angular-compile-and-create-components-at-runtime

أعتقد أن استخدام angularjs سيكون سهلاً. أنا أبحث عن عرض من جانب العميل فقط لتجنب إدخال البرنامج النصي للخادم.

لأي شخص مهتم ، أريد أن أشرح كيف قمت بحل هذه المشكلة في مشاريعي. واجهت نفس المشكلة بالضبط: HTML و CSS قادمان من واجهة برمجة تطبيقات ويب ، ديناميكيان تمامًا. لا يمكنك استخدام كل من AOT و buildOtimizer: true إذا كنت تريد تجميع Angular Modules and Components في وقت التشغيل لأن مُحسِّن الإنشاء يزيل المترجم من المصدر.

لقد خرجت تمامًا من الفقاعة الزاويّة حيث يبدو أنه لا يوجد أي دعم مخطط لمثل هذه الاستخدامات الديناميكية. لقد قمت للتو بتنفيذ مكونات الويب. ليست Angular Elements أو أي إطار عمل آخر ، فقط مكونات ويب متصفح عادية تعمل في كل مكان. أتلقى HTML و CSS مع بعض المعلومات الملزمة. مكوّن الويب قادر على فتح Shadow DOM جديد من أجل عزل أنماط التطبيق والمكونات. بهذه الطريقة لا يمكن لـ CSS أو HTML الواردة كسر تطبيقك.

في النهاية ، أنا حيث أردت أن أكون: AOT + build مُحسِّن في Angular و Dynamic HTML و CSS من واجهة برمجة تطبيقات الويب في وقت التشغيل بما في ذلك ربط البيانات. كل ذلك دون الحاجة إلى حزم مترجم Angular بأكمله في وقت التشغيل. وهو أسرع أيضًا لأنني قمت للتو بتجريد 2 ميجابايت من js غير الضرورية من وقت التشغيل.

لأي شخص مهتم ، أريد أن أشرح كيف قمت بحل هذه المشكلة في مشاريعي. واجهت نفس المشكلة بالضبط: HTML و CSS قادمان من واجهة برمجة تطبيقات ويب ، ديناميكيان تمامًا. لا يمكنك استخدام كل من AOT و buildOtimizer: true إذا كنت تريد تجميع Angular Modules and Components في وقت التشغيل لأن مُحسِّن الإنشاء يزيل المترجم من المصدر.

لقد خرجت تمامًا من الفقاعة الزاويّة حيث يبدو أنه لا يوجد أي دعم مخطط لمثل هذه الاستخدامات الديناميكية. لقد قمت للتو بتنفيذ مكونات الويب. ليست Angular Elements أو أي إطار عمل آخر ، فقط مكونات ويب متصفح عادية تعمل في كل مكان. أتلقى HTML و CSS مع بعض المعلومات الملزمة. مكوّن الويب قادر على فتح Shadow DOM جديد من أجل عزل أنماط التطبيق والمكونات. بهذه الطريقة لا يمكن لـ CSS أو HTML الواردة كسر تطبيقك.

في النهاية ، أنا حيث أردت أن أكون: AOT + build مُحسِّن في Angular و Dynamic HTML و CSS من واجهة برمجة تطبيقات الويب في وقت التشغيل بما في ذلك ربط البيانات. كل ذلك دون الحاجة إلى حزم مترجم Angular بأكمله في وقت التشغيل. وهو أسرع أيضًا لأنني قمت للتو بتجريد 2 ميجابايت من js غير الضرورية من وقت التشغيل.

مرحباً ، هل لديك أي مثال على هذا؟ شكرا

ها أنت ذا! ليس لدي الوقت حاليًا لشرح كل التفاصيل ، لذا فإليك القصة القصيرة:

يتم استدعاء init() و update() بواسطة Angular. مجموعة علامات span هي نصوص "قاعدة البيانات". من المؤكد أن هناك بعض عمليات تحليل القوالب تجري خارج المكون حتى أتمكن فقط من تكرار القيم ووضعها في الامتدادات ، ولكن مع المثال التالي ، يجب أن تحصل على الفكرة الأساسية. ولا تنس تسجيل مكون الويب المخصص في النافذة ...

export class TemplateContentWebComp extends HTMLElement {

  private tplDiv: HTMLDivElement;
  private tplSpans: Array<HTMLSpanElement> = new Array<HTMLSpanElement>();

  public init(templateCss: string, templateHtml: string): void {
    const template: HTMLTemplateElement = document.createElement('template');

    const css: string = `<style>:host { flex: 1; display: flex; flex-direction: column; } .tpl { flex: 1; box-sizing: border-box; }${!String.isNullOrWhiteSpace(templateCss) ? (' ' + templateCss) : String.empty()}</style>`;
    const html: string = `<div class="tpl">${!String.isNullOrWhiteSpace(templateHtml) ? (' ' + templateHtml) : String.empty()}</div>`;

    template.innerHTML = `${css} ${html}`;

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    this.tplDiv = this.shadowRoot.querySelector('div.tpl');

    const spans: NodeListOf<HTMLSpanElement> = this.shadowRoot.querySelectorAll(`span[data-var]`);

    if (spans != null && spans.length > 0) {
      spans.forEach(span => this.tplSpans.push(span));
    }
  }

  public update(isEditable: boolean, values: Array<string>): void {
    if (this.tplDiv != null) {
      if (isEditable) {
        this.tplDiv.removeAttribute('tpldisabled');
      } else {
        this.tplDiv.setAttribute('tpldisabled', '');
      }
    }

    for (let i = 0; i < this.tplSpans.length; i++) {
      this.tplSpans[i].innerHTML = values[i];
    }
  }
}

عند قراءة هذا التعليق ، أعتقد أنه يمكننا إغلاق هذه المشكلة هنا أيضًا 😞

https://github.com/angular/angular-cli/issues/17663#issuecomment -705737272

مرحبًا ، لقد كنت أبحث عن طريقة لتحميل قوالب متعددة في مكون واحد لفترة طويلة. بفضل منشور @ alarm9k ، تمكنت من إيجاد طريقة للقيام بذلك. بالطبع هذه الطريقة مؤقتة فقط حيث لا يمكن إطلاقها في وضع الإنتاج لأنها تتطلب المترجم.

لذلك كنت أبحث منذ أشهر عن طريقة للقيام بذلك ولكن في وضع الإنتاج.
لم يساعد هذا في الواقع لأنني لم أتمكن من العثور على أي شيء آخر ، لذا كملاذ أخير سألته على StackOverflow أضافت بعض المكافآت إلى السؤال وأضفت أخيرًا إجابة قادرة على القيام بذلك بشكل مثالي.

بالطبع إذا كنت تريد أوراق أنماط منفصلة ، يمكنك فقط إضافة ورقة الأنماط إلى قالب html بعد تحميلها من قاعدة البيانات وستعمل بشكل جيد (ربما ليس الأفضل ولكنه يعمل). من فضلك لا تصدقني على هذه الإجابة لأن جميع الاعتمادات تذهب إلى الشخص الذي أجاب على سؤالي بالطبع.

https://stackoverflow.com/questions/63998467/angular-multiple-templates-in-one-component-based-on-id-with-template-store

BillyCottrell يعتمد هذا أيضًا على ما تعرفه مسبقًا. إذا كنت تعرف جميع القوالب الخاصة بك مسبقًا ، فيمكنك دائمًا تشغيل نص برمجي node (أو ما شابه) لإقحامهم جميعًا معًا. من المحتمل أن تكون هناك طرق للقيام بذلك مباشرة باستخدام ng ، الاختراق حول القليل من حزمة الويب التي تعرضها ...

SamuelMarks هذا صحيح ، ولكن يمكن استخدام هذا عندما تطلب قوالب من خادم لأن لغة HTML الداخلية في المثال ستعمل بشكل غير متزامن لذلك لا تحتاج إلى معرفة القوالب مسبقًا وحتى إذا قمت بذلك ، فلا يزال بإمكانك تحميلها مسبقًا مما يجعلها تعمل بشكل أسرع نظرًا لعدم وجود حاجة لطلبها من الخادم. من الممكن أيضًا دمجها مع مؤقت وتبديل القالب بين الحين والآخر. هذه مجرد طريقة سهلة لمواصلة تحميل القوالب بغض النظر عما تعرفه ويمكنك تحديثه بعد ذلك إذا كنت تريد ذلك حتى تتمكن من عرض قالب مختلف أو ربما إصدار أحدث من القالب.

أعني أنه يمكنك بسهولة إنشاء خدمة قوالب بها نماذجك المعروفة مسبقًا. أضف هذه القوالب إليه وإذا أردت ، يمكنك إما تحديد أحد القوالب المعروفة أو إضافة قالب جديد من الخادم بناءً على احتياجاتك.
الشيء الوحيد الذي يتعين على المرء القيام به هو التحميل في الخدمة التي تحتوي على القوالب المعروفة مسبقًا مثل القوالب ذاتية الصنع من الخادم. وهو أمر جيد إذا لم تتمكن من تحميل قالب من خادم حتى تتمكن من الرجوع إلى أحد القوالب المعروفة مسبقًا. لذلك ليست هناك حاجة للتسلل بعد الآن.

نعم ، القوالب المعدة مسبقًا هي المفتاح هنا. إذا كنت تعرف AOT ، فيمكنك الاستمتاع ببعض المرح ، كما هو الحال مع https://github.com/SamuelMarks/ng-md-components المذكورة أعلاه (التي تتيح لك استخدام قوالب تخفيض السعر). تافهة لترقية تبعياتها وإضافة دعم لقوالب متعددة للجمع معًا (بافتراض أن أي شخص يهتم ؛ أشر فقط).