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['在路由中定义的参数名字'] --获取到参数 }