NG基础（1）

【20190617】
1.angular的版本
angular从1.x（js）到2.X到4.0，是为了更快，1.X不能很好的适应mobile开发"angular的1.X是用js写的，以后就是用TS"
–
“nativeJS”
/看上去很美，是我在初了解NativeScript后的感觉。对于前端开发者来说，无需切换技术栈，
任意挑选原生JavaScript/Angular/Vue，利用框架组件库和API封装，快速开发出高性能跨平台应用，是不是感觉特别美好？/
2.在angular中进行aot配置
“angularCompilerOptions”: {
“genDir”: “aot”,
“skipMetadataEmit” : true
}
}
3.angular生命周期
4.ngClass [naClass]="{ngclassname:abooleankey}" 当判断值为true时，引用此时的class样式，样式按照class选择器写在内部样式表里。
5.

.
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json

【20190826】
6.protractor。conf.js是一个配置测试的文件。
angular项目里的框架是jasmine，一个不依赖任何前端框架的轻量级测试框架。一个典型的测试api，没用过，不知道让干什么。
需要用npm下载安装 查看结果：protractor --version
7.angular页面跳转
–路由跳转？
‘router.navigatorUrl()’
//为什么用这个不用navigateByUrl？？？
e.g.
this.router.navigateByUrl(’/boe/celltest/cell-test’);//这个url要写全，其实是为了完整匹配路由树。所以这个url加上了/boe/，
xwebreport项目中用到的menu是后台动态拼接的，有时间了解一下路由树动态创建。
8.tabview应用
tabview配置两个地方，引用的是tabviewmodule，
1.在对应的router.ts的route中添加data:{tabLabel:‘头部显示的字体’，destroy:true}；
2.在module.ts中引用tabviewmodule；
【20190827】
9.excelDown的API
interface Blob ：一个存储二进制大对象

【20190902】
11.应用程序的基础路径，在index.html里面写标签 //
12.可以使用 #variableName 的语法，定义模板引用,我们获取的对象是对应 DOM 元素的引用… e.g. <p #myPTag (click)=ck(myPTag)>

ck(dom){console.log(dom)}
13.可以绑定鼠标，键盘事件
//点击(onClick)=’’ 回车(keydown.enter)=’’
注意 $event事件参数的作用。尝试一下获取鼠标点击$event的具体参数对象。'basically可以获取整个document了 。。
14.创建服务 ng g s XXX
//mail.service.spec.ts - 用于单元测试
//mail.service.ts - 新建的服务
15.配置服务 写在appmodule的providers里
15.5使用服务
除了使用 constructor(private mailService: MailService) 方式注入服务外，我们也可以使用 Inject 装饰器来注入
/* e.g. constructor(@Inject(MailService) private mailService) {} */
15.6非type类型的一般选择@Inject装饰器，直接写直接用,写是写在appmodule里面的。

、/*
e.g.provider:[
{privide:‘servicename’,usevalue：’’}
]

使用：
@Inject(‘servicename’)
*/
16.1.listagg(列名，‘自定义分隔符’) WITHIN GROUP (order by 列名) 将多行合并成一行

select listagg (列名, ‘,’) WITHIN GROUP (ORDER BY 列名) as 别名 from 表名 where 条件表达式;
17.循环 循环里的索引
/*
<li *ngFor=“let message of mailService.messages; index as i;”>
{{i}} - {{message}}

*/
'使用 index as i 用来访问数组中每一项的索引值。除了 index 外，我们还可以获取以下的值：

first: boolean - 若当前项是可迭代对象的第一项，则返回 true
last: boolean - 若当前项是可迭代对象的最后一项，则返回 true
even: boolean - 若当前项的索引值是偶数，则返回 true
odd: boolean - 若当前项的索引值是奇数，则返回 true
*ngFor 是结构性指令，语法糖，最终会转化为。。。emmm，。。。ng-template 。。 [ngforof] 。。let-。。等

18.样式
需要注意的是， background-color 需要使用单引号，而 color 不需要。这其中的原因是，
ng-style 要求的参数是一个 Javascript 对象，color 是一个有效的 key，而 background-color 不是一个有效的 key ，所以需要添加 ‘’。
19.@INPUT @OUTPUT
input是一个obj，output是一个事件触发器 EventEmitter.emit()
20.对于多重条件的判断
20.1.ngif={a:显示a，b:显示b，c:显示c} 'ngclass也可以这么条件绑定
*'ngClass 'NgClass 接收一个对象字面量，对象的 key 是 CSS class 的名称，value 的值是 truthy/falsy 的值，表示是否应用该样式。
20.2 ngswitch-ngswitchcase-ngswitchdefault

*/23.1ngoutletcontext的作用是绑定上下文中的属性，具体怎么绑定。。。？？

24.创建结构指令–‘就是自写属性
调用使用的是*符号
【20190905】
创建directive。创建好之后将指令内容写好用’@HostBinding（）'标注
在html中直接写指令名就可以使用

25.绑定属性
属性的相关值可以用字面量或者变量，使用变量可以实现绑定，随时变换，想要实现实时自动变换，要在属性名上加[ name ]!
26.订阅模式subscribe之后可以使用next关键字，还有error和别的关键字。complete用于结束观察
interval$.subscribe({
observerA = {
next: value => console.log('Observer A get value: ’ + value),
error: error => console.log('Observer A error: ’ + error),
complete: () => console.log(‘Observer A complete!’)
});
【20190927】
tsconfig–编译配置文件
“noUnusedLocals”: false,
“noUnusedParameters”: false,
“noImplicitReturns”: false,
“noFallthroughCasesInSwitch”: false,
“noImplicitAny”:true,
“noImplicitThis”:true,
【分页不好使】
没有写legend里面的data。。。
【20200501】
【模块管理文件中的entryComponent】
1.入口组件–一类会用于加载模块时引进，一类会在使用路由是，编译器自动引进来。
在app.module.tsh中，标记entryComponent的就是第一类，经过测试，将名称换作bootstap也是可以的。
（'bootstrap’的专业名称可以解释为“与。。。建立联系”）