html文件
//条件判断:*ngIf是直接影响元素手否被渲染,而非控制元素的显示和隐藏 //*ngIf=“” html文件 <div *ngIf="falg"> <p>falg为true</p> </div> <div *ngIf="bool"> <p>bool为false</p> </div> 循环语句:*ngFor <div *ngFor="let item of colors "> {{item}} </div> Switch语句:[ngSwitch]=”变量“ <div [ngSwitch]="isMax"> <p *ngSwitchCase="true"> true </p> <p *ngSwitchCase="false"> false </p> <p *ngSwitchDefault> 默认 </p> </div> 事件绑定:(事件类型)="方法名" <input #userName type="text" (keyup)="keyUpFn($event)"> <div (click)="keyUpFn($event)" *ngFor="let item of colors "> {{item}} </div> <!-- 模板引用变量 -->:#name <button (click)="getUserName(userName.value)">获取userName</button>
xxxxxx.component.ts文件
数据定义,事件都写在这个文件里
// component.ts文件 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-my-test', templateUrl: './my-test.component.html', styleUrls: ['./my-test.component.css'] }) export class MyTestComponent implements OnInit { falg = true bool = false ngOnInit() { } }