创建组件
创建页面
ionic g page 名称
自动创建route 不用添加route
用[routerLink]="[ '/' ] 即可实现跳转
创建组件
输入命令 ng g 可以查看要创建的命令
ng g component components/news //注意:通过命令创建的组件 已经自动引入在app.module.ts
表示在app文件下创建一个components文件夹 在该文件夹下创建一个news组件
想要用这个组件就在app.module.ts里引入
~~在其他地方使用直接输入名称(组件的根组件selector后的名字)当作html标签使用就行
在组件里定义属性以及绑定
定义:
在组件里.components.ts 里constructor上定义
1、用public定义 可以在别的组件使用
public 属性名=“属性” (不加public 默认全局)
指定数据类型 public 属性名:数据类型=“数据” any代表任何类型都可以
2、用protected保护类型 只有在当前和他的子类里面可以访问
3、用private 私有 只有在当前类才可以访问
也可以不给属性赋值 在constructor和ngOnInit里 用this.属性=‘’改变属性的值或给属性赋值
绑定数据:
在html里用{{}}使用 {{ 属性名 }}
绑定属性(在标签里):
静态绑定: title=“嘿嘿”
动态绑定:[title]=“属性名”
动态绑定class属性
[ngclass]="{'类名1':true,'类名2':false}"
//表示为true时显示类名1的样式反之显示类名2 的样式
动态绑定style属性
[ngstyle]="{'color':'red'}"
绑定html:
如果定义的属性里有html标签需要解析 在标签里用[innerhtml]=“属性名” 来解析
在模板里允许做运算 例如 1+2 = {{ 1+2 }}
angular里面的数组循环
定义数组:
1、public arr=[];
2、public arr:any[]=[];
3、public arr:array<any>=[]
循环数组:
*ngFor="let item of arr" //循环数组
*ngFor="let item of arr;let key(i) = index" //循环数组并生成索引
在标签里添加表示循环数组里每一项给item 然后就可以使用{{item}}数据
条件判断 *ngIf
在标签里 *ngIf 若为真执行为假不执行
事件:用()表示
(click)="方法名()" 方法写在ngIoInit()后
执行事件:
<button (click)="run()">按钮</button>
<button (click)="get()">按钮获取数据</button>
<button (click)="set()">按钮修改数据</button>
run(){
alert('执行事件');
}
get(){
alert(this.msg)
}
set(){
this.msg="木头人";
alert(this.msg)
}