一. 脚手架安装

全局安装脚手架：

npm install -g @angular/cli

创建新项目：

ng new my-app（项目名）

转到项目目录：

cd my-app

启动服务器：

ng serve --open

注：如果 4200 窗口已启动，再次启动服务器，命令行提示报错：

Port 4200 is already in use. Use '--port' to specify a different port

需要输入命令行：

ng serve -o --port 1111（窗口名），启动新窗口

创建新组件：

ng generate component heroes（组件名）

Angular最佳实践是在单独的顶级模块中加载和配置路由器：

ng generate module app-routing --flat --module=app

路由器插座，为了导出：

<router-outlet></router-outlet>

如果提示安装包出错：先检查是不是网路问题，可以安装淘宝镜像cnpm 最傻瓜式操作：移除 node_modules 文件夹及 package-lock.json 文件，执行npm install 对于部分类库版本低的问题怎么查看：脚手架在 package.json 里多数类库都是使用宽松的版本号，^0.1.0 带有 ^ 符号表示使用最新次版本号注意：这种方式会对所有类库按比较新的版本安装，但有可能会导致由于第三方类型的破坏性变更会导致一些不必要的麻烦

二. angular 指令

[ngModel] ( 双向绑定 )

<input type="text" [(ngModel)]="title">

ngNonBindable ( 禁止绑定 )

<div ngNonBindable>{{title}}</div>

注：使用了 ngNonBindable ，花括号就会被当做字符串一起显示出来。

[ngStyle] ( 绑定style样式 )

<div [ngStyle]="{'background-color': 'red'}"></div>
绑定一组样式：
<div [ngStyle] = 'divStyle'>div绑定一组样式</div>
divStyle = {
  'background':'#ccc',
  'font-size':'30px'
}

[class.active] ( class动态绑定 )

[class.active]="isActive"
绑定多个：
<div [ngClass]="{'active1': 'true', 'active2': true}">class</div>

*ngIf ( 控制DOM元素添加和删除 )

<div *ngIf = 'true'>添加元素</div>
<div *ngIf = 'false'>删除显示</div>

(click) ( 事件绑定 )

<div (click) = 'divClick()'>点击</div>

.enter( 事件修饰符)

<input type="text" (keyup.enter) = "divClick()">

*ngFor ( 循环一个数组对象 )

<ul *ngFor = "let v of obj;let i=index">
   <li>{{v}}--{{i}}</li>
</ul>

[ngSwitch] ( 循环语句 )

message = {'name':'tian'}

<ul [ngSwitch]="message.name">
   <li *ngSwitchCase="tian">满足条件</li>
   <li *ngSwitchCase="kuo">不满足条件</li>
   <li *ngSwitchDefault>默认</li>
</ul>

三. angular 几种常用方法

$event事件代理

<ul (click) = "eventAgent($event)">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

eventAgent(event){
   console.log(event.target)
}

set监听

set title(newTitle: string){
  console.log(newTitle)//返回监听属性值
}

四. angular 生命周期函数

1、指令与组件共有的钩子：

ngOnChanges( 当数据绑定输入属性的值发生变化时调用 )

ngOnInit( 在第一次 ngOnChanges 后调用)

ngDoCheck( 自定义的方法，用于检测和处理值的改变 )

ngOnDestroy( 指令销毁前调用 )

2、组件特有的钩子

ngAfterContentInit( 在组件内容初始化之后调用 )

ngAfterContentChecked( 组件每次检查内容时调用 )

ngAfterViewInit( 组件相应的视图初始化之后调用 )

ngAfterViewChecked( 组件每次检查视图时调用 )

五. angular 组件

//子组件
<div>
  child
</div>
//父组件
<div>
     parent
     //子组件在父组件渲染
     <app-child></app-child>
</div>

@Component({
    selector: 'app-child',
    templateUrl: './app-child.component.html',
    styleUrls: ['./app-child.component.less']
})

六. 父子<=>传参

1. 父=>子组件传参（1）

父传子：
<div>
   <app-child [name] = "title"></app-child>
</div>
子组件接收：
@Input()//输入属性，在父组件通过属性绑定，传递数据到子组件（父=>子）
public name

接收参数
receiving(){
   //打印所传参数
   console.log(this.name)
}
执行此方法完成传参：this.receiving()

2. 子=>父组件传参（2）

子传父：
<div>
   <app-heros1 [name] = "title" (foo) = "bar($event)"></app-heros1>
</div>
bar(event){
   console.log(event);//打印‘传入父级组件’
}
子组件传入
@Output() //输出属性，在父组件通过绑定事件，把子组件中的数据传递到父组件（子=>父）
foo = new EventEmitter<string>();
todo(){
   this.foo.emit('传入父级组件');
}
执行此方法完成传参：this.todo()

七. 服务注入

// 将父组件当做服务注入到子组件中
import {AppComponent} from "../app.component";
constructor(
   private appComponent:AppComponent,
) { }

// 将子组件当做服务注入到父组件中
import { ViewChild } from '@angular/core';
import { HeaderComponent } from './header/header.component';
@ViewChild(HeaderComponent)
private headerComponent: HeaderComponent;

注：父子组件不可互相作为服务注入模块

八. 路由跳转及传参

// 跳转路由需引入
import { ActivatedRoute, Router } from '@angular/router';
<button (click) = "jump()">跳转</button>
constructor(
   private activatedRoute: ActivatedRoute,//接受跳转后传入的对象
   private router: Router,       //设置路由跳转
){}
jump():void{
   // navigate          第一个参数为英雄路由，第二个参数是跳转路由传入的值（所传值是JSON对象）
   this.router.navigate(["/heros",{queryParams:{obj:{ id: 1, foo: 'foo' }}}])
}
//跳转路由取值
console.log(JSON.parse(this.activatedRoute.queryParams['value'].obj))

结合以上路由跳转可能会用到此方法，返回上一级路由
this.location.back()