مرحبا. اسمي روماني ، وأنا لست مخترع الدراجات. أنا أحب الإطار الزاوي والنظام البيئي المحيط به ، وأطور تطبيقات الويب الخاصة بي به. من وجهة نظري ، فإن الميزة الأساسية لـ Angular على المدى الطويل تعتمد على الفصل بين الكود بين HTML و TypeScript ، والذي تم وصفه بالتفصيل من قبل أحد مطوريها
لماذا - angular-renders-components-with.html هذه الميزة لها جانب سلبي: الحاجة إلى التجميع من حيث المبدأ وتعقيد مكونات تجميع حيوي في وقت التشغيل. ولذا فإنني أرغب في استخدام بناء جملة القالب Angular المألوف لمنح المستخدم تطبيقاته القدرة على تخصيص قوالب الحروف ، وإنشاء تقارير وجداول بيانات للطباعة ، أو تعيين تنسيق التصدير لملفات xml! لمعرفة كيفية القيام بذلك ، مرحبا بكم في القط!
مهمة
بشكل عام ، قد يبدو استخدام القوالب الزاوية من قبل المستخدم كما يلي: لدينا مجموعة معينة من البيانات:
const data = { project: 'MySuperProject', userName: 'Roman', role: 'admin', projectLink: 'https://example.com/my-super-projectproject' }
من الضروري إعطاء الفرصة لتكوين نص الرسالة ، والتي سيتم إرسالها إلى المستخدم بعد تحرير المشروع. باستخدام قالب Angular ، قد يبدو كالتالي:
<body> ! {{project}} <a href="{{projectLink}}">3D </a> <div *ngIf="role == 'admin'"> <a href="{{projectLink}}?mode=edit"></a> </div> </body>
مكتبة قالب نانوغرام
يمكن حل هذه المشكلة باستخدام برنامج التحويل البرمجي Angular على العميل (أو حتى جانب الخادم) ، ولكنها تستغرق وقتًا طويلاً للغاية وستتطلب سحب الكثير من ميغابايت من التعليمات البرمجية إلى العميل. لماذا المترجم الزاوي كبير جدا؟ هذا يرجع إلى حقيقة أنه يدعم مجموعة من الوظائف المتنوعة لتكوين المكونات والوحدات ، كما يحتوي أيضًا على محلل HTML الخاص به! لذلك قررت أن أكتب الحد الأدنى لمحول القالب الزاوي الذي يستخدم محلل HTML المدمج في المتصفح. تمكنا من القيام بذلك في 200 فقط مع بضعة أسطر من التعليمات البرمجية في بضع ساعات. قررت مشاركة النتيجة مع الجمهور على
جيثباستخدام مكتبة القوالب ng بسيط للغاية:
تثبيت التبعية من npm
npm install --save @quanterion/ng-template
أو من خلال الغزل
yarn add @quanterion/ng-template
واستخدامها على النحو التالي:
import { compileTemplate, htmlToElement } from '@quanterion/ng-template'; async test() { let data = { name: 'Roman' }; let element = htmlToElement(`<div>{{name}}</div>`); await compileTemplate(element, data); alert(element.outerHTML); }
بناء الجملة المدعومة
- التعبيرات {{تعبير}} مع إمكانية الوصول إلى المتغيرات ووظائف الاتصال
- قوالب نانوغرام قالب
- حاويات نانوغرام حاوية
- الشروط * ngIf + * ngIf كـ
- دورات * ngFor
- الأنماط [style.xxx] = "value" و [style.xxx.px] = "value"
- الفئات الشرطية [class.xxx] = "value"
- الملاحظات {{name $}} مع اشتراك تلقائي في قيمة (كأنبوب غير متزامن)
راجع اختبارات
ng-template.spec.ts لمزيد من التفاصيل.
باستخدام ايفال
لتقييم التعبيرات في القوالب ، يتم استخدام eval مع التفضيلات والمجان. الحقيقة هي أن الوصول إلى المتغيرات في القوالب الزاوية يستخدم دون بادئة JavaScript المعتادة. لذلك ، تحتاج إلى استدعاء eval () ، الذي يحتوي على جميع المتغيرات من كائن البيانات في النطاق. أنا لم تنجح في إنشاء مثل هذا الرمز ل eval () ، لأنه عرض الرمز
const data = { a: 1, b: () => 4 }; const expression = 'a+b()'; eval('a =1; b = ??;' + expression);
لا يسمح بتمرير الوظائف
تم العثور على الحل عن طريق إنشاء دالة لها أسماء الحقول للكائن مع البيانات:
const data = { a: 1, b: () => 4 }; let entries = [] for (let property in data ) { entries.push([property, data[property]]) } const params = entries.map(e => e[0]); const fun = new Function('code', ...params, `return eval(code)`); const args = entries.map(e => e[1]); const expression = 'a+b()'; const result = fun.call(undefined, expression , ...args);
ملاحظة: آمل في المستقبل ، عندما تستقر واجهة برمجة تطبيقات برنامج التحويل البرمجي Ivy الجديد ، سيكون من الممكن إنشاء مجموعة من المشغلين لـ Ivy وإنشاء مكونات كاملة في الديناميات!
رابط للمصدر