Angular笔记

组件

结构

import {...} from ...;/*注解,告诉编译器加载内容*/@Component({    selector:'...',//标签名    template:'...',//组件模板,使用url加载或直接写;插值绑定：变量声明使用{{...}}:      //或者：templateUrl: './hero-detail.component.html',      //styleUrls: ['./hero-detail.component.css'],    ...    })export class AppComponent {    name='...';属性}

根组件的声明

//通过 [root] = 组件变量，声明根组件<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

模板（template）

<input [(ngModel)]="hero.name" placeholder="name">//双向绑定数据

/*利用循环，显示数据，let .. of ..的语法*/<ul class="heroes">  <li *ngFor="let hero of heroes">    <span class="badge">{{hero.id}}</span> {{hero.name}}  </li></ul>

/*事件绑定 (...事件)="函数"*/<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

/*if语句 *ngIf="变量"*/<div *ngIf="selectedHero">...</div>

/*css样式;利用[class.selected]=true|false来控制移除和添加*/<li *ngFor="let hero of heroes"  [class.selected]="hero === selectedHero"  (click)="onSelect(hero)">  <span class="badge">{{hero.id}}</span> {{hero.name}}</li>

/*变量绑定，将数据传到子组件*/<hero-detail [hero]="selectedHero"></hero-detail>/*绑定到的目标属性必须是一个输入属性，否则Angular会拒绝绑定，并抛出一个错误。*/@Input() hero: Hero;

服务

获取数据，方便所有的组件共享数据

//初始化import { Injectable } from '@angular/core';@Injectable()export class HeroService {}

路由

//导入模块import { RouterModule }   from '@angular/router';//加载@NgModule({imports: [   ...    RouterModule.forRoot([      {        path: 'heroes',        component: HeroesComponent      }    ])  ],  ...})//添加标签template: `   <h1>{{title}}</h1>   <a routerLink="/heroes">Heroes</a>   <router-outlet></router-outlet> `

数据绑定

<li>{{hero.name}}</li><hero-detail [hero]="selectedHero"></hero-detail><li (click)="selectHero(hero)"></li>

• {{hero.name}}插值表达式在 li 标签中显示组件的hero.name属性的值。
• [hero]属性绑定把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。

• (click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。

• 双向数据绑定是重要的第四种绑定形式，它使用ngModel指令组合了属性绑定和事件绑定的功能。 下面是HeroDetailComponent模板的范例：

<input [(ngModel)]="hero.name">

键盘、鼠标事件

模板引用变量，使用 #name ，来标记当前标签为变量

@Component({  selector: 'little-tour',  template: `    <input #newHero      (keyup.enter)="addHero(newHero.value)"      (blur)="addHero(newHero.value); newHero.value='' ">    <button (click)="addHero(newHero.value)">Add</button>    <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>  `})export class LittleTourComponent {  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];  addHero(newHero: string) {    if (newHero) {      this.heroes.push(newHero);    }  }}

通过 ngModel 跟踪修改状态与有效性验证

状态 为真时的 CSS 类 为假时的 CSS 类 控件被访问过。 ng-touched ng-untouched 控件的值变化了。 ng-dirty ng-pristine 控件的值有效。 ng-valid ng-invalid