angular4

创建新项目

ng new 项目名字

创建新组价,例如在app下面创建一个新组件

cd src/app

ng g c home(组件名)

此时就会在app下面创建一个home组件了

 

 

组件文件构成html,css,spec.ts(忽略),ts

ts文件说明

select("后面填选择器名字"，其他页面可以通过选择器名字来渲染改页面)

contructor （构造函数在组件存在的时候就已经触发）

ngOnInit(页面加载完触发)
变量赋值一般以 变量：string 这种方式赋值，原因是angular里面有typescript，不确定变量为什么类型可以用any ， 变量：any

interface（接口 可以作为变量的一些说明）

例如定义了变量 a:alive,此时需要对alive做说明

interface alive{

　　love:string,

　　bir:number,
　　pro:string

}

ng g c xxx/xxx(命令，在项目中创建xxx文件夹在xxx文件夹里面穿件一个xxx组件)

模板绑定

{{属性名}}

属性绑定

<input [value]="属性名">

双向数据绑定

[(ngModel)]="属性名"

 重点1：

a组件定义的属性如何被b组件实验使用？

1、a组件必须和b组价有个连接点 例如在a组件中存在<b></b>

2、a组件自定义属性 例如person:{color:'red',name:'apreson'}

3、在a组件关联b组件中自定义属性 <b [preson]='person'></b>  知识点 自定义属性 [自定义属性名]=“属性”

4、因为是b组件想读取值，所以在b组件中引入Input 用Input去修饰自定义属性，@Input() person;此时在b组件中就可以使用a组件中的属性了

重点2:

a组件中的方法如何被B组件调用？

1、在a.html中放置B组件 通过这个接口自定义方法例如<b（a）="a"></b>

2、在a.ts中定义方法a

3、因为是b组件调用a方法此时需用引入OutPut
4、在b.ts里面OutPut() a=new EventEmitter()

5、此时在b组件中使用a方法还需要，在b组件触发这个方法

6、在b.html中定义一个<button (click)='goa'></button>

7、在b.ts中定义方法

goa(){
this.a.emit()    
}　
此时算是完成了B组件调用a组件的方法

 路由传参模块ActivateRoute

import {ActivateRoute} from "@angular/route"

constructor(private route:ActivatedRoute){
    route.snapshot.params['在路由中定义的参数名字']    --获取到参数
}