آموزش تمپلیت ها در انگولار ۶

آموزش تمپلیت ها در انگولار ۶ 

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تمپلیت ها در انگولار ۶ خواهیم پرداخت.

انگولار ۶ از <ng-template> به عنوان تگ مشابه انگولار ۴ به جای <template> استفاده می کند که در انگولار۲ استفاده می شود. دلیل اینکه انگولارr 4 <template> را به <ng-template> تغییر داد این است که بین تگ <template> و تگ استاندارد <template> html تضاد نامی وجود دارد. در ادامه به طور کامل منسوخ خواهد شد.

اجازه دهید اکنون از الگو به همراه شرط if else استفاده کنیم و خروجی را ببینیم.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable;then condition1 else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click Me</button>

برای تگ Span، دستور if را با شرط else اضافه کرده‌ایم و شرط ۱، else شرط۲ را فراخوانی می‌کنیم.

الگوها باید به صورت زیر فراخوانی شوند –

<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>

اگر شرط درست باشد، قالب شرط ۱ و در غیر این صورت شرط ۲ فراخوانی می شود.

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   //array of months.
   months = ["January", "February", "March", "April",
      "May", "June", "July", "August", "September",
      "October", "November", "December"];
   isavailable = false;
   myClickFunction(event) {
      this.isavailable = false;
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
      console.log(event);
   }
}

خروجی در مرورگر به صورت زیر است –

متغیر isavailable نادرست است بنابراین الگوی شرط۲ چاپ می شود. اگر روی دکمه کلیک کنید، الگوی مربوطه فراخوانی می شود. اگر مرورگر را بررسی کنید، خواهید دید که هرگز تگ span را در dom دریافت نمی کنید. مثال زیر به شما در درک همین موضوع کمک می کند.

اگر مرورگر را بررسی کنید، خواهید دید که dom تگ span ندارد. دارای شرایط نامعتبر از الگو در dom است.

خط کد زیر در html به ما کمک می کند تا تگ span را در dom دریافت کنیم.

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select (change) = "changemonths($event)" name = "month">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; else condition2">Condition is valid.</span>
   <ng-template #condition1>Condition is valid from template</ng-template>
   <ng-template #condition2>Condition is invalid from template</ng-template>
</div>
<button (click)="myClickFunction($event)">Click Me</button>

اگر شرط then را حذف کنیم، پیام “Condition is valid” را در مرورگر دریافت می کنیم و تگ span نیز در dom موجود است. برای مثال، در app.component.ts، متغیر isavailable را درست در نظر گرفته‌ایم.

منبع.

لیست جلسات قبل آموزش انگولار ۶

1. آموزش انگولار ۶
2. آموزش مقدمه انگولار ۶
3. آموزش راه اندازی محیط انگولار ۶
4. آموزش راه اندازی پروژه در انگولار ۶
5. آموزش کامپوننت ها در انگولار ۶
6. آموزش ماژول در انگولار ۶
7. آموزش اتصال داده در انگولار ۶
8. آموزش اتصال رویداد در انگولار ۶