angular+ng-zorro+echarts入门总结（一）

入门总结（angular篇）

要放假了，赶紧总结一下，不然都忘光了

正文

关于Angular

1.安装、创建、运行hello word

npm install -g @angular/cli

ng new <app-name> 

补充："–skip-install" 跳过package.jsom.dependencies下声明的包安装（npm install），因为有时候网络环境那啥，最后的结果就是吃力不讨好。然后 cd <app-name> && npm i

ng new <app-name> --skip-install

如果有各种询问，相信你也能看懂，基本就是 y。
运行

ng s -o  #运行服务，并在浏览器打开

2.在angular中使用过的命令

写在前面

1. 如果不需要spec.ts 文件，应该增加参数 --skip-tests=true, 即 ng g m/c/s <component-name> --skip-tests=true
2. 官网给的建议是 m 在 c之前创建

---

2.1 module

ng g m <module-name>

• 用于创建模块,module-name 从根开始创建，但不会创建同名文件夹，所以如果你在组织目录结构的时候，需要将前面的文件夹写入，不然他就直接在根创建xxx.module.ts。

---

2.2 component

ng g c <component-name>

• 用于创建组件,component-name 从根开始创建，并且会创建同名文件夹，包含四个文件 html、css/less/scss、ts、spec.ts

---

2.3 service

ng g s <service-name>

• 用于创建服务，同模块一样，从根开始创建，所以根据自己需要，是否要增加目录层级

---

2.4 routing

ng g m <routing-name> --routing=true

• 用于创建路由模块 xxx-routing.module.ts

注意

如果此时你的module没有创建，它会同时创建module，和routing.module

---

2.5 guard

ng g guard <guard-name> --routing=true

• 用于创建路由守卫模块 xxx.guard.ts,出现询问我都是默认第一个CanActivate，其他的还没用过

3.重点记录下

路由：

<router-outlet></router-outlet> //路由器出口

一个占位符，Angular 会根据当前的路由器状态动态填充它。
我理解的就是路由内的组件，被指定渲染在里面。

1. 全局路由
   主要配置好，404与默认地址，且在最后被导入。

---

2.子路由

子路由配置情况如上图，访问的形式类似与目录查找，./ 当前路由下的 ../上级路由，访问如下图，

3.路由守卫

主要关心 canActivate 函数的返回值，因为它的值决定了子路由是否能访问，如下图

4.解决过的一些问题

问题1：

Can't bind to 'ngModel' since it isn't a known property of 'input'

解决：
在使用angular的双向绑定的时候，没有导入FormsModule模块。
同时注意，需要在包含当前component的module中导入。这个在之后其他类似问题的解决很有帮助。

...
 import { FormsModule} from '@angular/forms';
 ...
 @NgModule({
	imports:[
		...
		FormsModule
		...
	]
})

延申
Can't bind to 'AAAA' since it isn't a known property of 'BBBBB'
一般这个问题的出现，都是由于没有导入相应的模块，或者说你导入了，但是你的component和module的关系不对应。

---

问题2：
明明配置了路由，但是就是不能按照正确的逻辑来跳转
解决：
·根路由一定是要最后导入的

（目录构建有点乱）