angular 整理

---

参考

https://www.cnblogs.com/wjw1014/p/10262309.html

---

网址

• angular: https://angular.cn/docs
• ag-grid: https://www.ag-grid.com/angular-grid/grid-properties/
• ng-zorro: https://ng.ant.design/docs/introduce/zh
• rxjs : https://rxjs.dev/guide/overview

npm

package.json来制定名单，需要哪些npm包来参与到项目中来，npm install命令根据这个配置文件增减来管理本地的安装包。

dependencies(项目依赖库):在安装时使用–save则写入到dependencies
和devDependencies（开发依赖库）：在安装时使用–save-dev将写入到devDependencies
node_modules文件里的依赖全部安装：npm install
node_modules文件里的依赖只安装dependencies：npm install --production
node_modules文件里的依赖只安装devDependencies：npm install packagename --dev

知识点

• 声明式组件是通过组件声明的selector加载;
• 入口组件（entry component）是通过组件的类型动态加载;
  入口组件是通过指定的组件类加载组件。主要分为三类：
  • 在@NgModule.bootstrap里声明的启动组件，如AppComponent。
  • 在路由配置里引用的组件
  • 其他通过编程使用组件类型加载的动态组件

npm install -g ts-node // 安装 ‘ts-node’
npm install -g typescript
npm install -g @angular-devkit/schematics-cli

npm install -g @angular/cli
npm install -g @angular/cli@x.x.x

ng new todo-lists

ng update --help
ng update
ng update @angular/core

ng serve

ng generate
ng g m about – 生成一个about module
ng g c about --module about – 生成一个about 组件，放入about 模块中
ng g c todo --module app – 生成一个about 组件，放入about 模块中

ng build – 打包，默认输出到 dist 目录
ng build --prod 对应 angular.json 配置文件

angular.json
prefix

模块
component directive pipe
根据功能划分
应用模块就是对应用类零散的组件、指令、服务等按照功能进行归类包装；
同模块的指令可以相互使用同模块的组件，跨模块的不可以。

@ngModule
selector : 使用组件的时候使用什么样的元素选择器中括号表示指令使用在元素属性上，
declaration : 组件 指令 pipe
import: 模块输入
exports : 输出
bootstrap: 一般在根模块下声明，指定应用启动时从那个模块进行启动
provides
一个component 只能属于一个moudle

main.ts

组件
就是一个普通的es6 class
@component 装饰器，就是元数据

*ngFor {{item.xxx}}
(click)="xx"   -- 圆括号代表输出，输出一个click事件，模板向组件发送事件
属性绑定-[value]  ：把组件类的数据传递到组件模板中。
事件绑定-(keyup) ：把模板产生的数据通过函数调用传递到组件类。
双向绑定-[(ngModel)] ：实现数据双向流动。

输入、输出

Pipe
格式化数据

装饰器 – 注解
就是个函数,在代码编译的阶段修改类的行为；如下例，代码编译时，会将T传入add，修改T行为

@Add('go')
class T {}

function Add(prop: any) {
  return function (target: any) {
    target['prop'] = true;
    return target;
  }
}

console.log(T);

直接运行ts
ts-node xxx.ts
tsc decorator.ts

路由
import { RouteModule } from ‘@angular/router’

url路径是xxx 的时候，加载某个 component

RouterModule.forRoot();
RouterModule.forChild();

<router-outlet></router-outlet> 是个指令，路由发生变化时渲染，就是放到哪儿

routerLink='url' routerActive="css 的类，需要在css 中定义"

服务
服务是实现专一目的的逻辑单元，如日志服务。

响应式表单
FormControl FormGroup FormBuilder

---

问题：
@Input() 输入

属性或参数中使用 ？：表示该属性或参数为可选项
属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
变量后使用 ！：表示类型推断排除null、undefined

---