Angular学习日记 - 日更 - 0911

特点

• 相比vue / react更适合中型、大型的企业级项目

所需的vscode插件

• Angular file
• Angular 7 Snipp

Bash命令

• ng new 项目名字 --skip-install：创建项目但不安装依赖
• ng serve --open： 启动服务并自动打开页面

基本模板语法

• 结构型指令
  • *ngFor 注意F大写
  • *ngIf
• 插值
  • {{ item }}
• 绑定语法
  • [title]
  • [product] 属性绑定，可以实现父传子
• 事件绑定
  • (click)

生命周期钩子

• ngOnChanges
  • 被绑定的输入属性的值发生变化时调用
  • 首次调用发生在ngOnInit()之前
• ngOnInit
  • 第一次显示数据绑定和设置指令/组件的输入属性之后调用
  • 初始化指令/组件
  • 在第一轮ngOnChanges完成之后调用，仅一次
• ngDoCheck
  • 自定义方法，用于检测和处理值的改变
• ngAfterContentInit
  • 组件初始化之后
  • 仅组件
• ngAfterContentChecked
  • 组件每次检查内容时调用
  • 仅组件
• ngAfterViewInit
  • 组件视图初始化之后调用
  • 仅组件
• ngAfterViewChecked
  • 组件每次检查视图时调用
  • 仅组件
• ngOnDestroy
  • 销毁指令/组件之前调用，并清扫
  • 可以反订阅可观察对象和分离事件处理器，用来防止内存泄漏

组件交互

父传子

• <app-child-component [product]="product" (notify)="onNotify"></app-child-component>
  • 这个product是在父组件中已经被声明过的，才可以在这里被传递给子组件
  • 不光可以穿状态，还可以传递绑定的事件
  • 在父组件中调用子组件的时候，标签是kebab的单标签

路由

在app.module.ts中进行注册

• 对于动态路由，需要设置一定父级的固定字段

服务 Service

• 可以类比Redex，Vuex。也是一刷新就消失的全局状态管理
• 在使用的时候，需要有针对性的注入到具体使用的某个组件中
• 服务中也可以注入其他服务

HttpClient

• 可以在服务中 注入HttpClient服务来获取数据并与外部API和资源进行交互
• 注入到指定的服务中需要在该服务的ts文件的constructor中进行声明

管道

• 用来格式化数据的方法
  • | currency： 在前面添加$符号
  • | uppercase：全部字母大写

双向数据绑定

• 双向[(ngModel)]="hero.name"

  

  这里相当于把hero.name的属性绑定到了HTML的textbook元素上

• ngModel的使用需要导入 FormsModule

• 用[]配合 @Input可以实现父子组件的双向绑定

控制class名字

• [class.selected]="hero === selectedHero"
  • selected: 你添加的类名
  • 引号中的内容： 添加条件

注意

• 在双引号中的错误，Terminal是不会提示的。但是在页面中会看到问题。
• constructor(要注入的内容)
• e2e ： 端到端的测试项目
• src下面的style.css/scs控制全局样式
• 通过创建实例组件来注入service的参数，相当于一个对该service实现的单例模式