angularjs tricky

1 语法：

“===”表示 value相同，类型相同

2 名称解释

2.1: ng-container.
使用 ngIf,ngFor都需要在div,span,label等标签中实现
比如： <div *ngIf="_isDevMode" class="form-debug">
ng-container可以代替它们.而ng-container在运行时消失.
这样减少了div,span,label等标签的大量增加
参考:
https://zhuanlan.zhihu.com/p/24781585
https://segmentfault.com/a/1190000009175508

2.2: ng-template
有两个作用.
2.2.1：使用ng-template可以在ts文件中写html.ng-template和@ViewChild连用
比如: <ng-template #saveButtonTemplate>
<table>
...
</table>
</ng-template>

export class PagTest implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('saveButtonTemplate') saveButtonTemplate: TemplateRef<any>;
......
}
给template起名saveButtonTemplate,用ViewChild加载.template中的html就work了.
2.2.2：和ng-container 一样.语法不同而已
<ng-template ngFor let-itemRow [ngForOf]="showItems" let-i="index">
<ng-container *ngFor="let itemRow of showItems" let i="index">

3 数据绑定：单向绑定，双向绑定

3.1 单向绑定：.ng-bind="name"和{{name}}：单向显示$scope绑定的数据，ng-bind为angularjs自带显示数据指令

3.2 双向绑定: ng-model="name"：双向数据绑定，文本框值改变，name值就改变。

例如 <mat-radio-group class="plcm-whitelist-radio" [(ngModel)]="ipType">
<mat-radio-button value="isIPv4">{{IPV4 | translation}}</mat-radio-button>
<mat-radio-button value="isIPv6">{{IPV6 | translation}}</mat-radio-button>

</mat-radio-group>

ipType是双向绑定，ipV4是单向绑定 (ipV4 is final string “IPV4”)

4 ngModel,[ngModel] and [(ngModel)] 区别
注意第三项比第二项多个()
[ngModel]="user.name" //变量单向绑定
友情提示：[ngModel] 是单向绑定，当表单中 name 输入框的值改变时，不会同步更新 this.user.name
[(ngModel)]=ngModelChange)="user.name = $event" //和变量双向绑定

举例分析参见: https://segmentfault.com/a/1190000009037539

5 ngModelChange 和 valueChanges 区别
两种双向绑定的方法，都是为各自的方法监听value的变化,处理value的变化
ngModel是在控件上直接绑定。然后用ngModleChange处理监听。
valueChanges是通过form，formGroup绑定控件。然后用subscribe 处理监听
https://www.cnblogs.com/dennis0525/p/7631301.html

6
http://www.runoob.com/try/try.php?filename=try_ng_model_status

描述		属性类
$valid	ng-valid	Boolean false (如果输入的值是合法的则为 true)。比如email的合法性检查
$invalid	ng-invalid	Boolean true 与valid相反
$dirty	ng-dirty	Boolean 如果值改变则为 true)。
$pristine	ng-pristine	Boolean false (如果值改变则为 false)。与dirty 相反

7 事件：onChange, onBlur
onblur：只要input失去焦点就会触发 onblur事件。不管input框里面的值是否改变，都会触发事件。
onchange：只有当input框里面的值发生变化才会执行，这里加了值判断
前者是任何一个字符输入都会触发，后者是整个框输入完成才触发.
前者的例子是Richard中error 提示消除,在框中，改动字符仍然是error，当将最后一个字符也改对了，这时是正确答案，则error 提示消失。
所以error 提示检测是通过每个字符变化检测的。
后者的例子是verify password，输入完password，鼠标焦点移除input，则发送rest验证

8
下面是rest使用方法,(request/respond处理)相当于java 打包message request/handle message respond
this._restExec.queryRecentCall用于rest发送;next用于rest响应处理
this._restExec.queryRecentCall(pCurDateTime.getTime().toString(_radix)).subscribe({
next: (data) => {
if (data.length > 0) {
this._clearRecentCallsDisabled = false;
} else {
this._clearRecentCallsDisabled = true;
}
},

rest 形式(待条件用?多个条件用&)
/rest/calllog/queries/id?start=1&limit=100

9
css: 获取控件css
Grome debug 模式:element--arraw选中控件--可以在右边的方框调边距---然后将value加到code中，<div style="margin-left: 15px">

10
formControlName = ngModel
<div>用户名：<input formControlName="nickname" name="nickname" type="text" required patter="[a-zA-Z0-9]+"></div>
<div>用户名：<input ngModel name="nickname" type="text" required patter="[a-zA-Z0-9]+"></div>
没有formcomponent.

11 Blob 是js write 二进制，比如download file等
blob 主要功能是：
1 Blob构造函数
var blob = new Blob(data, type)
Blob构造函数接受两个参数：
参数data是一组数据，所以必须是数组，即使只有一个字符串也必须用数组装起来.
参数type是对这一Blob对象的配置属性，目前也只有一个type也就是相关的MIME需要设置 type的值：
'text/csv,charset=UTF-8' 设置为csv格式，并设置编码为UTF-8
'text/html' 设置成html格式
注意：任何浏览器支持的类型都可以这么用
var blob = new Blob(['我是Blob'],{type: 'text/html'});
2 属性
blob.size //Blob大小（以字节为单位）
blob.type //Blob的MIME类型，如果是未知，则是“ ”（空字符串）
其他可以参考
https://www.kancloud.cn/dennis/tgjavascript/241840
====================================================
other:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

常用快捷键
ctrl+shift+O 优化（去掉多余头文件)

ctrl+shift+F 统一格式

常用第三方工具: postman

html:这么debug，ts的变量
<div *ngFor="let opti of _videoDialingOrderCtl.options">
{{opti}} 11 {{opti.value}} 222
{{opti.tag}}
</div>
this._audioDialingOrderPreference1Ctl.options[0].val for ts set/get
this._audioDialingOrderPreference1Ctl.options[0].tag for show in GUI;

ajax:
// 使用方法，但是这种方法已经过时了
doUsbCaptureStartRequest:function( filter ) {
var ajaxOption = {
url:Draco.urlPrefix + '/rest/pcap',
method:'POST',
params:{
action:'startUsbCaptureWithFilter',
filter:filter
},
scope:me,
success:me.onUsbCaptureStartSuccess,
failure:me.onUsbCaptureStartFailed
};
//一段ajax request，回来的respond通过回调函数处理，
success: call onUsbCaptureStartSuccess,failure call onUsbCaptureStartFailed 方法

现在改成用本质http.get or this.http.post
getJson(uri: string): Observable<any> {
return this.httpGetJson(uri, false);
}

protected httpGetJson(url: string, cache: boolean = true): Observable<any> {
this.http.get(url, options)
}

猜你喜欢