بنابراین اکنون در اینجا دستورالعمل های Angular را خواهیم دید. ما سعی خواهیم کرد تمام دستورالعمل های مهم را پوشش دهیم. و این قسمت ششم از Angular Series است. در اینجا نقشه راه سری Angular است.
- مقدمه و تنظیم محیط - قسمت اول
- تایپ اسکریپت به طور خلاصه - قسمت دوم
- Building Blocks of Angular - قسمت سوم
- تغییرات اتصال و نمایش داده ها - قسمت چهارم
- ساخت قطعات قابل استفاده مجدد - قسمت پنجم
بنابراین اگر هنوز مقالات قبلی من را نخوانده اید، می توانید ادامه دهید و سفر خود را با Angular شروع کنید.
بیا شروع کنیم.
ما دستورالعمل ngFor را دیده ایم. اما در اینجا ngFor را با جزئیات بیشتری می بینیم و دستورالعمل های دیگر را نیز بررسی می کنیم. پس بیایید شروع کنیم.
ngIf
مواقعی وجود دارد که ممکن است بخواهید بسته به شرایطی، بخشی از صفحه را نشان دهید یا پنهان کنید. بنابراین در اینجا در جزء برنامه، آرایه دوره ها را تعریف می کنیم و در اینجا فقط از اعداد ساده استفاده می کنیم. در یک برنامه دنیای واقعی، ما اشیاء دوره واقعی را داریم که در آن دوره های واقعی را تعریف می کنیم. اما در مورد آن نگران نباشید و فقط روی نمایش و پنهان کردن بخشی از صفحه تمرکز کنید زیرا در اینجا از دستورالعمل ngIf استفاده می کنیم. اکنون در فایل app.component.html ما، اگر دورههایی در آرایه داشته باشیم، آنها را در فهرستی ارائه میکنیم، در غیر این صورت این پیام را به کاربر نشان میدهیم که هنوز دورهای وجود ندارد.
- export class AppComponent {
- courses = ['MTH', 'CS', 'CHE'];
- }
و اینجا فایل app.component.html ما است،
- <div>
- List of Courses
- </div>
- <div>
- No Courses Yet
- </div>
بنابراین اکنون در اینجا ما از دستورالعمل برای اصلاح DOM استفاده خواهیم کرد.
2 نوع دستورالعمل وجود دارد،
- دستورالعمل های ساختاری
ساختار DOM را با افزودن یا حذف عناصر DOM اصلاح می کند.
- دستورالعمل های ویژگی
آنها ویژگی های عناصر DOM را تغییر می دهند.
اکنون در اینجا می خواهیم ساختار DOM را تغییر دهیم. ما می خواهیم یک عنصر DOM را بر اساس شرط اضافه یا حذف کنیم. هنگامی که از DOM ساختاری استفاده می کنیم، باید پیشوند آنها را با ستاره (*) قرار دهیم.
- <div *ngIf="courses.length > 0">
- List of Courses
- </div>
- <div *ngIf="courses.length == 0">
- No Courses Yet
- </div>
حالا برنامه را در مرورگر اجرا کنید.
PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject> سرویس ng
![دستورالعمل های زاویه ای](http://pezhvak24.ir/dl/10kcor/cscd/article/overview-of-angular-directives-part-six/Images/image001.png)
حالا بیایید آرایه دوره ها را در جزء برنامه خالی کنیم. و در اینجا نتیجه را خواهیم دید.
- export class AppComponent {
- courses = [];
- }
![دستورالعمل های زاویه ای](http://pezhvak24.ir/dl/10kcor/cscd/article/overview-of-angular-directives-part-six/Images/image002.png)
و این روش کلاسیک ngIf است که قبلا از Angular 4 استفاده می کردیم. حال بیایید تصویر بالا را بررسی کنیم. و در اینجا ما فقط یک div را خواهیم دید.
![دستورالعمل های زاویه ای](http://pezhvak24.ir/dl/10kcor/cscd/article/overview-of-angular-directives-part-six/Images/image003.png)
بنابراین div دیگر در DOM نیست. و این چیزی است که من سعی دارم به شما نشان دهم. بنابراین وقتی از ngIf استفاده می کنیم و مقدار درست است، عنصر به DOM اضافه می شود در غیر این صورت از DOM حذف می شود.
اکنون در Angular 4، در اینجا ما یک سینتکس کمی متفاوت برای اجرای همان ویژگی داریم. بنابراین به جای استفاده از ngIf دو بار، از if else استفاده می کنیم.
- <div *ngIf="courses.length > 0; else noCourses">
- List of Courses
- </div>
- <ng-template #noCourses>
- No Courses Yet
- </ng-template>
بنابراین در اینجا از ng-template به جای div استفاده می کنیم و شناسه را قرار داده ایم و این شناسه را با else در ngIf، Angular 4 اختصاص می دهیم. بیایید آن را در مرورگر امتحان کنیم.
![دستورالعمل های زاویه ای](http://pezhvak24.ir/dl/10kcor/cscd/article/overview-of-angular-directives-part-six/Images/image002.png)
و اگر دوره ها را در جزء برنامه قرار دهیم، نتیجه خواهد بود.
![دستورالعمل های زاویه ای](http://pezhvak24.ir/dl/10kcor/cscd/article/overview-of-angular-directives-part-six/Images/image001.png)