Angular6入门

一. 脚手架安装 

    全局安装脚手架：

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 生命周期函数

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

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

ngOnInit( 在第一次 ngOnChanges 后调用)

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

ngOnDestroy( 指令销毁前调用 )
复制代码

    二、组件特有的钩子 

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()
复制代码