Angular03
回顾
• 命令行
创建项目包
ng new 项目名
启动命令
ng s 或 ng s -o
生成组件
ng g c 组件名
生成管道
ng g p 管道名
生成指令
ng g d 指令名
• angular用法
双标签内容: `{{}}`
属性: [属性名]='值' 或 属性名="{{ 值 }}"
事件: (事件名)='方法名()'
双向数据绑定: [(ngModel)]="值"
一定要手动引入+注册 Form 模块
条件渲染: *ngIf
列表渲染: *ngFor="let item of items; let i=index"
管道: {{ 值 | 管道 }}
指令: <标签 指令名 />
父子传参: <标签 属性名="值" />
接收: @input() 属性名:类型
;
掌控子元素: <标签 #唯一标识 />
绑定: @viewChild('唯一标识')
变量: 变量类型;
• TS语言
静态类型分析:
变量名:类型名 – vscode可以提供的代码提示 和 错误预警
类型:
– number string boolean any boolean|number
– Array<string>
数组中都是字符串元素
– string[]
等价上方
– [string, number]
规定数组中两个元素, 分别的类型
自定义对象类型:
interface 类型名{
属性名: 类型名;
属性名: 类型名;
}
访问控制词:
public 公开的, 类外 类内 子类
protected 保护的, 类内 子类
private 私有的 类内
今日内容
子父传参
生成 myc01组件:
ng g c myc01
- 把一个父的方法传递给子
- 子通过调用传入的方法, 传递信息给父
结论: 参数是子的, 方法是父的!
生命周期
每个组件 从出生 到 最终的销毁: 生命历程中的每个特别的阶段 都会触发对应的方法 – 称为 钩子方法/钩子函数
组件: myc02
ng g c myc02
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-myc02',
templateUrl: './myc02.component.html',
styleUrls: ['./myc02.component.css'],
})
export class Myc02Component implements OnInit {
num = 5;
constructor() {
//
console.log('constructor: 不算组件的生命周期, 是面向对象的 初始化方法.');
}
ngOnInit(): void {
console.log('ngOnInit: 开始初始化');
//通常在这里 发送网络请求
}
//相当于挂载操作 mounted
ngAfterViewInit(): void {
console.log('ngAfterViewInit: 视图初始化成功. 代表界面');
}
ngAfterContentInit(): void {
console.log('ngAfterContentInit: 数据初始化成功');
}
// 更新
ngAfterContentChecked(): void {
console.log('ngAfterContentChecked: 数据发生更新时');
}
ngAfterViewChecked(): void {
console.log('ngAfterViewChecked: 视图发生更新时');
}
ngOnDestroy(): void {
console.log('ngOnDestroy: 开始销毁');
}
}
服务
在vue中相同的概念: vueX
全局状态共享
创建两个组件: myc03 myc04
ng g c myc03
ng g c myc04
创建服务命令:
ng generate service 服务名
简化:
ng g s 服务名
例如: ng g s name
Ionic
相当于 mintUI 和 Vue的关系
ionic 就是 基于angular 的 手机端UI库
官方: https://ionicframework.com/
安装脚手架
npm i -g @ionic/cli
常见报错:
生成项目包:
ionic start 包名 类型(blank/tabs/sidemenu)
blank: 基础包
tabs: 带有底部标签导航栏
sidemenu: 带有侧边导航
生成最基础的包: 注意命令行所在目录下生成
ionic start blankApp blank
所有选项都回车即可
启动项目: 在项目下执行
ionic s