Angular7:模板
Angular7使用<ng-template>作为标签,而不是Angular2中使用的<template>。<ng-template>自Angular4发布以来一直在使用,早期版本(即Angular2)使用<template>也是为了同样的目的。从Angular4开始,它开始使用<ng-template>而不是<template>的原因是<template>标签和html 的<template>标准标签之间存在名称冲突。它会完全反对继续下去。这是Angular4版本的主要变化之一。
现在让我们将模板与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标记,我们添加了带有else条件的if语句,并将调用模板condition1,else调用condition2。
模板将按如下方式调用
<ng-template #condition1>Condition is valid from template</ng-template> <ng-template #condition2>Condition is invalid from template</ng-template>
如果条件为真,则调用condition1模板,否则调用condition2。
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 7'; // declared array of months. months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; isavailable = false; // variable is set to true myClickFunction(event) { //just added console.log which will display the event details in browser on click of the button. alert("Button is clicked"); console.log(event); } changemonths(event) { alert("Changed month from the Dropdown"); } }
浏览器中的输出如下:
变量isavailable为false,因此打印condition2模板。如果单击该按钮,将调用相应的模板。
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 7'; // declared array of months. months = ["January", "Feburary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; isavailable = false; //variable is set to true myClickFunction(event) { this.isavailable = !this.isavailable; // variable is toggled onclick of the button } changemonths(event) { alert("Changed month from the Dropdown"); } }
如下所示,单击按钮即可切换isavailable变量
myClickFunction(event) { this.isavailable = !this.isavailable; }
当您根据isavailable变量的值单击按钮时,将显示相应的模板
如果您检查浏览器,您将看到您永远不会在dom中获得span标记。以下示例将帮助您理解这一点。
尽管在app.component.html,我们为如下所示的条件添加了span标签和<ng-template>
<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>
当我们在浏览器中检查时,我们在dom结构中没有看到span标记和<ng-template>。
下面一行html代码将帮助我们获得dom中的span标记
<!--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>
如果我们移除了当时的条件,我们会在浏览器中得到“Condition is valid”的消息,并且span标签也可以在dom中获得。例如,在app.component.ts中,我们将isavailable变量设为true。