Angular基础知识整理

投机者的终结者

已于 2022-12-06 20:24:04 修改

阅读量983

点赞数

文章标签： javascript 前端 angular.js

于 2022-12-06 14:12:15 首次发布

本文链接：https://blog.csdn.net/qq_40843345/article/details/128201870

版权

一、常见命令

ng new 项目名称 ( --skip-install)：创建项目
ng serve (–open)：运行项目
ng serve --port 端口号：指定端口启动项目
ng g module 模块名称 (–routing)：创建模块(带路由）
ng g component 组件名：创建组件
ng g service 服务名：创建服务

二、目录结构

在这里插入图片描述

e2e: 端到端的测试文件夹
node_modules: 第三方模块存放的地方。
src: 项目所有文件存放的地方
package.json: npm配置文件。
proxy.config.json：修改默认端口，配置进行行跨域访问。

app: 组件以及 app.module.ts 定义根模块。
assets：静态资源。
index.html：主页，所有页面的入口
main.ts/main.js：应用的主要入口点。
style.css ：全局样式

三、App.module.ts,组件分析

在这里插入图片描述

app.module.ts：属于根模块。

在这里插入图片描述

@NgModule: 接受一个元数据对象，主要用来告诉 angular 如何编译和启动应用
declarations ：引入当前项目运行的组件。
imports：引入当前模块运行依赖的其他模块
providers：定义的服务。
bootstrap：指定应用的主视图。
entryComponents：模板没有引用到组件，主要用于动态调用。

组件 : component.ts文件

@Component：指定组件类、服务，以及如何引用该组件。
selector：该组件的名称。
templateUrl：html模板。
styleUrls：css样式

四、组件提供的模板

1. 数据绑定
在这里插入图片描述

2. 属性绑定
在这里插入图片描述

*3. ngFor
在这里插入图片描述

*4. ngIf
在这里插入图片描述

*5. bgSwitch
在这里插入图片描述

6. [( ngModel )] --> 双向数据绑定 ,注意引入 FormsModule。
在这里插入图片描述

7. [ngClass]
在这里插入图片描述

8. [ngStyle]
在这里插入图片描述

9. 管道
在这里插入图片描述

五、组件通信

1. 父传子
@input()

在这里插入图片描述

2. 子传父
@viewChild()
在这里插入图片描述

@Output() 和 EventEmitter ：广播数据
在这里插入图片描述

3. 非父子传递
通过服务来传值
在这里插入图片描述

六、路由以及路由守卫

写法：

   1. 通配符：{ path: '**', component:  Component }
   2. 重定向：{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
   3. 一般路由：{ path: 'heroes', component: HeroListComponent },
   4. 路由入口：<router-outlet></router-outlet>

路由连接形式：

5. /test/id
{path: 'test/:id', component: TestComponent}
this.router.navigate(['/test', '121']);
6. /test?id='1'
this.router.navigate(['/test'],{ queryParams: { id: '121' });

路由守卫

在这里插入图片描述

自定义表单

声明一个基类。–> 封装好所需要的组件类–>获取表单数据进行遍历，为每一个字段创建一个formControl，绑定校验规则，并放入同一组中。–>通过表单提供的 valueChanges 方法来检测值的变化。
在这里插入图片描述

地图定位组件：首先进一步封装地图组件，然后通过子组件向父组件传参的方式，调用子组件中的方法，通过回调函数来获取地图定位中的定位点，实现获取地图详细信息以及定位点的坐标信息。
级联组件：对普通下拉组件进一步封装，也就是提供更多的参数信息，通过增加父组件（健值）信息来确定那两个组件之间是父子关系。当父组件的值发生变化时，会触发angular提供的服务间传值来向所有的下级组件传值，这时候，下级组件会进行父级组间判断，当传递信息组件的健值与所有下级组件中某一个组件的父组件（健值)相同时。该组件会发生相应变化，依此类推，直到最后的组件比变化。

在这里插入图片描述

定位组件与级联组件联合使用：增加一个联合使用的属性，和一个组件级别的标识。当两者都开启时，地图组件定位后，会通过坐标点的信息去查找对应的区域、街道、社区、网格数据。我们将这个数据通过服务（该服务只服务于地图组件和级联选择组件的根组件)来传递。这样父组件接收到对应的数据，父组件会和定位组件中返回的数据进行级别的筛选，找到对应的code码，通过code码在提供的选项中去选择对应的数据。而父组件发生变化后，我们的子组件会处罚级联组件中的服务传递数据。从而实现两个组件的联动。