1-5.ag2基础知识-双向绑定

一、目录结构

1.学习基础知识1-4中构建之后的项目目录试一下这样子的

2.每次打开项目的时候，都要先启动服务器  

（1）打开命令框，进入项目目录 cd my-ag-project

（2）打开服务器 npm start ，以便实时监听页面改变并自动刷新页面

二、数据绑定

1.双大括号插值表达式（单项数据绑定的一种形式）

>> app.component.ts

import { Component } from '@angular/core';

// 组件
@Component({

  // template的容器，angular入口（在index.html中 <my-app></my-app>）
  selector: 'my-app',     

  // 页面模板
  template: `<h1>{{title}}</h1>`,
})

// 用于处理业务逻辑的类
export class AppComponent {
  title = 'this my first angular project';
}

这时12行模板显示的就是17行的title值

12行这里的双大括号是Angular中的插值表达式绑定语法。它们表示组件的title属性的值会作为字符串插入到HTML标签中间。

2.使用多行模板字符串添加更多HTML

（1）在添加模板之前，需要更多的数据来支持他

import { Component } from '@angular/core';
// 创建一个类，提供业务数据信息
export class Information {
  myName: string;
  myAge: number;
}

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>`,
})

export class AppComponent {
  title = 'this my first angular project';
  // 定义一个Information 类型的类
  information: Information = {
    myName: 'weizeyang',
    myAge: 22
  };
}

（2）使用多行模板字符串添加更多HTML

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <div>
      <label>name : </label>
      <span>{{information.myName}}</span>
    </div>
    <div>
      <label>age : </label>
      <span>{{information.myAge}}</span>
    </div>
  `,
})

 注：要用反引号（``）包裹组件模板

 3.双向绑定

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1><div>
      <label>name1 : </label>
      // [{ngModel}]是一个Angular语法，可以将information.myName绑定到输入框中。它的数据流是双向的：从属性到输入框，并且从输入框回到属性
      <input [(ngModel)]="information.myName" />
    </div>
    <div>
      <label>name2 : </label>
      // 这里显示的是和上面一样的information.myName，看看它会不会同样改变
      <span>{{information.myName}}</span>
    </div>
  `,
})

保存之后，控制台报错： ngModel 不是input的已知属性

虽然 ngModel 是一个有效的Angular指令，但它默认情况下确实不可用的。

它属于一个可选模块 FormsModule。我们必须选择使用那个模块。

>> app.module.ts

// 导入模块相关符号
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

// 将模块添加到@NgModule元数据的imports数组中，它是当前应用正在使用的外部模块列表
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

刷新页面

    修改input框内的值 ->    

实现了双向绑定