本文共 1650 字，大约阅读时间需要 5 分钟。

一、模板引用变量

模板引用变量使用井号(#)来声明引用变量。

模板引用变量通常用来引用模板中的某个DOM元素，它可以引用Angular组件或指令或 Web Component。

我们可以在当前模板的任何地方使用模板引用变量。

示例：

   
    
    
      
     
      模板引用变量1
     
    
    
    
    
      
           
     {
  {phone.value}}    
    
  
   

showOne(str: string) {    console.info(str);  }

模板引用变量常用的是在Form表单定义时使用。

注：Angular中解析表单需要在当前模块中导入 FormsModule 。

这样Angular NgForm指令的引用，具备了跟踪表单中的每个空间的值和有效性的能力。

示例：

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from "@angular/forms";import { AppComponent } from './app.component';import { StudentComponent } from "./student/student.component";@NgModule({  declarations: [    AppComponent,    StudentComponent  ],  imports: [    BrowserModule,    FormsModule  ],  providers: [],  bootstrap: [   // AppComponent,    StudentComponent  ]})export class AppModule { }

Html模板：

   
    
    
      
     
      模板引用变量2-表单
     
    
    
    
    
      
     
        
      
          
       姓名：          
               
      
        
      
          
       年龄：          
               
      
             
      确定提交        
      正在提交...      
     
      
     
              表单对象:{
  {stu|json}}      
     
    
    
  
   

export class StudentComponent implements OnInit {  constructor() { }  ngOnInit() {  }  stu = {};//空对象  public issubmit: boolean = false;  showOne(str: string) {    console.info(str);  }  onSubmit(model: NgForm) {    console.info(model);    //因为只读不能设置操作按钮的disabled属性    //model.invalid=false;    this.issubmit = true;    setTimeout(() => {      this.issubmit = false;    }, 1000);  }}

提交操作过程：

更多：