Angular DAY03

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

1. 把一个父的方法传递给子
2. 子通过调用传入的方法, 传递信息给父

结论: 参数是子的, 方法是父的!

生命周期

每个组件 从出生 到 最终的销毁: 生命历程中的每个特别的阶段 都会触发对应的方法 – 称为 钩子方法/钩子函数

组件: 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