Angular2_学习笔记

创建项目

ng new xxx

创建model

• [ ] 每个组件都必须声明在（且只能声明在）一个 NgModule中。
• [ ] ng generate component xxx 是Angular创建组件命令

• [ ]  Angular CLI 在生成 HeroesComponent 组件的时候就自动把它加到了 AppModule 中。

  ##### ng generate component xxx
  

  // 需要先cd到正确的文件夹，之后再执行创建命令 否则会默认添加到app文件夹下

---

元素选择器

ng generate component heroes 命令生成的组件

即具有其特定的元素选择器 <app-heroes></app-heroes>
可以用来在其他页面调用

---

定义数据

数据定义一般都会放在当前组件的class类里面
普通定义可以直接=赋值
readSpan = 'Hello World！'

指定规则的定义可以通过定义一个类来修饰
定义：
export class Hero {
    id: number;
    name: string;
}
使用：
import { Hero } from './../hero';
selectedHero: Hero;

---

创建服务

ng generate service hero

@Injectable可以从任何地方获取数据：Web 服务、本地存储（LocalStorage）或一个模拟的数据源。

---

属性绑定

HTML：
<span>
  {{readSpan}}
</span>

TS：
export class NavbarComponent implements OnInit {
    readSpan = 'Hello World！'
    constructor() { }
}

---

模板绑定

<input type="text" [value]="bindValue.title">

---

双向数据绑定

<input [(ngModel)]="define.title">

解决ngModel不可用问题_app.model.ts中引入

[(ngModel)]是Angular双向数据绑定的写法，但是默认情况下他是不可用的，需要 在顶级类AppModule中导入

import { FormsModule } from '@angular/forms';

imports: [
    FormsModule
  ],

---

管道

<h2>{{ hero.name | uppercase }} Details</h2>

通过调用管道，对数据进行格式化

---

循环处理数据

<ul class="heroes">
  <li *ngFor="let hero of heroes">
  </li>
</ul>

---

条件处理数据

<div *ngIf="selectedHero">

</div>

---

动态绑定类名

[class.类名]="成立条件" 
[class.selected]="hero === selectedHero" 

---

父组件向子组件传值

// 父组件
export class AppComponent {
  bindValue = {
    title: '我将要传递给子组件'
  }
}

<app-home [bindValue]="bindValue"></app-home> // 自定义属性

// 子组件
import { Input } from '@angular/core'; // 引入input

export class HomeComponent implements OnInit {
  @Input() bindValue;   // 用input修饰传入的数据
}

<input type="text" [value]="bindValue.title">

---

事件绑定

<span (click)="clickMe(this.readSpan)">
  {{readSpan}}
</span>
<br>
<span on-click="clickMe(this.readSpan)">
  {{readSpan}}
</span>

---

事件传递

// 父组件
<app-home (onList)="list()"></app-home>

export class AppComponent {
  list () {
    alert('我是父组件的事件')
  }
}

// 子组件
<p (click)="clickMe()">
  home works!
</p>

import { Output, EventEmitter } from '@angular/core';

@Output() onList = new EventEmitter();

clickMe (val) {
    this.onList.emit();
}

---

路由配置

// app.routers.ts

import { Routes, RouterModule } from "@angular/router";     // 引用依赖
import { ModuleWithProviders } from "../../node_modules/@angular/compiler/src/core";    // 引用依赖

import { HomeComponent } from "./home/home.component";  // 引用组件
import { DirectoryComponent } from "./directory/directory.component";   // 引用组件

const appRouters:Routers = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'directory',
        component: DirectoryComponent
    }
];

export const router: ModuleWithProviders = RouterModule.forRoot(appRouters);

// app.model.ts
import { router } from './app.routers'
@NgModule({
  imports: [
    router
  ]
})
export class AppModule { }

// app.component.html
<a [routerLink]="['/']">home</a>
<router-outlet></router-outlet>

---

路由参数

// app.routers.ts 定义
const appRouters:Routers = [
    {
        path: 'directory/:params',  // 定义参数
        component: DirectoryComponent
    }
];

// app.component.html 使用
<a [routerLink]="['/directory', params]">directory</a>

// app.component.js 赋值
export class AppComponent {
  params = 'params'
}

// directory.component.ts 接收
import { ActivatedRoute } from '../../../node_modules/@angular/router';

export class DirectoryComponent implements OnInit {
  title:string;
  constructor(private route:ActivatedRoute) {
    this.params = route.snapshot.params['params']
  }
}