ما المقصود بـ 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.

إنشاء تطبيق Angular الجديد .
في الطرفية للتطبيق الخاص بك ، قم بتشغيل ملف من مكون التوليد الأمر لإنشاء مكون جديد. اتصل بالمكون الجديد 'about-page'.
في app.component.html ، استبدل الكود الحالي بعلامات للمكون الجديد:
```
<app-about-page></app-about-page>
```
افتح ال about-page.component.ts ملف. إذا لم يكن لديك الكثير من تعليمات HTML البرمجية ، فيمكنك استخدام سمة القالب لكتابتها مباشرةً داخل ملف TypeScript. استبدلComponent decorator بما يلي:
```
@Component({ 
  selector: 'app-about-page', 
  template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>' 
}) 
```

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

@Component({ 
  selector: 'app-about-page', 
  template: `<h2>About Page</h2> 
              <br> 
              <p>This is rendering the HTML from the TypeScript file!</p>` 
})

في المحطة ، اكتب من الخدمة لتجميع التعليمات البرمجية الخاصة بك وتشغيلها في متصفح الويب. افتح التطبيق الخاص بك على http://localhost:4200/. Your HTML code from the TypeScript file will render on the page.
في about-page.component.ts ، استبدل 'template' بـ 'templateUrl' بدلاً من ذلك. قم بتضمين الارتباط إلى ملف HTML الخارجي للمكون. يمكنك استخدام 'templateUrl' إذا كان لديك كود HTML أكثر تعقيدًا يتطلب ملفه الخاص.
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html' 
})
```
أضف بعض تعليمات HTML البرمجية إلى ملف about-page.component.html الملف:
```
<h2>About Page</h2> 
<p>This is rendering the HTML from the HTML file!</p>
```
ارجع إلى متصفحك أو أعد تشغيله من الخدمة لإعادة تجميع التعليمات البرمجية الخاصة بك. افتح التطبيق الخاص بك على http://localhost:4200/. The browser now renders the HTML from the about-page.component.html ملف.

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

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

تعذر العثور أو تحميل main class main

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

أفضل طريقة لمشاركة مقاطع الفيديو مع العائلة

في تطبيق Angular الذي أنشأته مسبقًا ، افتح ملف about-page.component.ts ملف. أضف سمة 'أنماط' إلى المكون. داخل 'الأنماط' ، أضف نمط CSS للصفحة:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styles: ['h2 {color:red}','p {color:green}'] 
})
```
في المحطة ، اكتب من الخدمة لتجميع التعليمات البرمجية الخاصة بك وتشغيلها في متصفح الويب. افتح التطبيق الخاص بك على http://localhost:4200/ to view the styling specified in the TypeScript file.
إذا كان لديك الكثير من CSS ، فاستخدم 'styleUrls' بدلاً من 'styles' ، لربط ملف TypeScript بملف CSS خارجي. في about-page.component.ts ، استبدل الديكور المكون بما يلي:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styleUrls: ['./about-page.component.css'] 
})
```
أضف بعض أنماط CSS إلى ملفات about-page.component.css :
```
h2 { 
  color: blue 
} 
p { 
  color: darkorange 
}
```
ارجع إلى متصفحك أو أعد تشغيله من الخدمة لإعادة تجميع التعليمات البرمجية الخاصة بك. افتح التطبيق الخاص بك على http://localhost:4200/ to view the styles used from the external CSS file.

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

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

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