ما المقصود بـ templateUrls و styleUrls في Angular؟

القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة.

باستخدام Angular ، يمكنك فصل الصفحات أو مربعات الحوار أو الأقسام الأخرى من تطبيقك إلى مكونات. تتكون المكونات في تطبيق Angular بشكل أساسي من ملفات HTML و CSS و TypeScript.

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

يمكنك أيضًا عرض HTML و CSS للمكون باستخدام TypeScript ، من خلال تحديد سمات القالب والنمط. يمكنك استخدام templateUrl أو styleUrls للارتباط بملفات HTML أو CSS خارجية.

ما هو النموذج و templateUrl في Angular؟

عندما انت قم بإنشاء المكون الخاص بك في Angular، يمكنك عرض HTML لها باستخدام قالب. هناك طريقتان يمكنك من خلالهما كتابة قالب HTML الخاص بك:

• يمكنك كتابة كود HTML الخاص بك داخل قالب في ملف TypeScript نفسه.
• يمكنك كتابة كود HTML الخاص بك في ملف خارجي ، وربط ملف TypeScript بملف HTML هذا.

في مكون جديد ، يمكنك تعيين سمات "template" أو "templateUrl" بناءً على مكان كتابة HTML.

1. إنشاء تطبيق Angular الجديد.
2. في الطرفية للتطبيق الخاص بك ، قم بتشغيل ملف نانوغرام إنشاء المكون الأمر لإنشاء مكون جديد. استدعاء المكون الجديد "about-page".

   ng إنشاء مكون حول الصفحة

3. في app.component.html ، استبدل الكود الحالي بعلامات لمكونك الجديد:

   <app-about-page></app-about-page>

4. افتح ال about-page.component.ts ملف. إذا لم يكن لديك الكثير من تعليمات HTML البرمجية ، فيمكنك استخدام سمة القالب لكتابتها مباشرةً داخل ملف TypeScript. استبدل مصممComponent بما يلي:

   @عنصر({
    المحدد: 'app-about-page',
    نموذج: '<h2>حول الصفحة</h2><ر><ص>هذا هو عرض HTML من ملف TypeScript!</ ص>'
   })
   

5. إذا كنت تريد تضمين قالب متعدد الأسطر ، فيمكنك استخدام علامات الاقتباس الخلفية بدلاً من ذلك:

   @عنصر({
    المحدد: 'app-about-page',
    نموذج: `<h2>حول الصفحة</h2>
   <ر>
   <ص>هذا هو عرض HTML من ملف TypeScript!</ ص>`
   })

6. في المحطة ، اكتب يخدم ng لتجميع التعليمات البرمجية الخاصة بك وتشغيلها في متصفح الويب. افتح التطبيق الخاص بك على http://localhost: 4200/. سيتم عرض كود HTML الخاص بك من ملف TypeScript على الصفحة.
7. في about-page.component.ts، استبدل "template" بـ "templateUrl" بدلاً من ذلك. قم بتضمين الارتباط إلى ملف HTML الخارجي للمكون. يمكنك استخدام "templateUrl" إذا كان لديك كود HTML أكثر تعقيدًا يتطلب ملفه الخاص.

   @عنصر({
    المحدد: 'app-about-page',
    templateUrl: './about-page.component.html'
   })

8. أضف بعض تعليمات HTML البرمجية إلى ملف about-page.component.html ملف:

   <h2>حول الصفحة</h2>
   <ص>هذا هو تحويل HTML من ملف HTML!</ ص>

9. ارجع إلى متصفحك أو أعد تشغيله يخدم ng لإعادة تجميع التعليمات البرمجية الخاصة بك. افتح التطبيق الخاص بك على http://localhost: 4200/. يعرض المتصفح الآن HTML من ملف about-page.component.html ملف.

ما هي الأنماط والأسلوب في Angular؟

على غرار HTML ، يمكنك استخدام "style" أو "styleUrls" بناءً على المكان الذي تختار تخزين CSS فيه.

يمكنك تضمين CSS في كود TypeScript إذا كان لديك إعلانات CSS بسيطة للغاية. بخلاف ذلك ، يمكنك استخدام "styleUrls" لربط ملف TypeScript بملف CSS خارجي يحتوي على المزيد من الأنماط.

1. في تطبيق Angular الذي أنشأته مسبقًا ، افتح ملف about-page.component.ts ملف. أضف سمة "أنماط" إلى المكون. داخل "الأنماط" ، أضف نمط CSS للصفحة:

   @عنصر({
    المحدد: 'app-about-page',
    templateUrl: './about-page.component.html',
    الأنماط: ['h2 {color: red}','ص {اللون: أخضر}']
   })

2. في المحطة ، اكتب يخدم ng لتجميع التعليمات البرمجية الخاصة بك وتشغيلها في متصفح الويب. افتح التطبيق الخاص بك على http://localhost: 4200 / لعرض النمط المحدد في ملف TypeScript.
3. إذا كان لديك الكثير من CSS ، فاستخدم "styleUrls" بدلاً من "styles" ، لربط ملف TypeScript بملف CSS خارجي. في about-page.component.ts، استبدل مصممComponent بما يلي:

   @عنصر({
    المحدد: 'app-about-page',
    templateUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
   })

4. أضف بعض أنماط CSS إلى ملفات about-page.component.css:

   h2 {
    لون أزرق
   }
   ص {
    اللون: برتقالي غامق
   }

5. ارجع إلى متصفحك أو أعد تشغيله يخدم ng لإعادة تجميع التعليمات البرمجية الخاصة بك. افتح التطبيق الخاص بك على http://localhost: 4200 / لعرض الأنماط المستخدمة من ملف CSS الخارجي.

عرض HTML للمكون في Angular

أنت الآن تعرف الطرق المختلفة التي يمكنك من خلالها عرض محتوى HTML و CSS في تطبيق Angular. يمكنك تحديد الأسلوب الذي تريد استخدامه بناءً على مدى تعقيد HTML و CSS.

إذا كنت مهتمًا ، يمكنك استكشاف كيفية تمرير البيانات بين ملفات HTML و TypeScript لمكون Angular.