@Tomato

Angular做一些问题记录

目录

接口访问

接口路径调用修改proxy.conf.json 注意配置servcie前缀

前端、postMan 访问接口路径 (注意前缀)

http://192.168.1.53:8097/webapi/AuditWorkRecord/ListPageAuditWorkRecord

http://localhost:49759/healthaudit/AuditWorkRecord/ListPageAuditWorkRecord

http://localhost:4200/webapi/AuditWorkRecord/ListPageAuditWorkRecord

http://localhost:4200/healthaudit/AuditWorkRecord/ListPageAuditWorkRecord

angular环境搭建及其常用语法

需求：vsCode、 node.js、angular cli、 前端UI adminlte.io

1. 装好node.js
2. vsCode跑npm install -g @angular/cli
3. 然后跑npm install

常用语

1. npm run start:aot 编译项目提交git eg: 方法不存在会报错发布不成功但是能dev
2. npm run start:dev 调试项目
3. ctrl+c 停止批语句
4. npm run build:deploy 编译发布

注

1. 一定要知道angularjs react angular 的区别
2. npm命令–> nodejs cnpm命令–> 淘宝镜像
3. install一直报错的话记得检查是否开了多个终端
4. proxy.conf.json 文件存放接口路径

常用备注

1.方法参数

 onFun(item: string | number, need?: any) {

2.时间格式化

  <td>{{item.date|date:'yyyy/MM/dd'}}</td>

3.语法

[(AA)]  双向绑定
(BB)    Html修改  --单向绑定影响--> Ts  eg:(deleteClk)="onEnd()"
[CC]    Ts修改  --单向绑定影响-->  Html  eg:[bsConfig]="bsConfig"-- 不加字符串会被语法认为是变量
*ngIf="item.str!='完结'"-- 阻止事件冒泡
(click)="onFun;$event.stopPropagation();"-- 弹出窗口
<button type="button" class="btn btn-primary btn-px mr-2" data-toggle="modal" data-target="#writeNew">新建</button>-- 组件confirm
<app-delete-confirm [delId]="" [tagStr]="'是否确认完结'" [tagConfigStr]="'完结'" (deleteClk)="onEnd()">
</app-delete-confirm>$('#delete').modal('show');
$('#delete').modal('hide');--下拉框
<select (click)="isEdit()" [(ngModel)]="ProjectsManageInputModel.projectsManageStatus"style="width: 100%;" class="form-control input-sm radius"><option value=null selected>请选择表单状态</option><option value="1"> 新建</option><option value="2"> 完结</option>
</select>

Radio循环绑定值

eg: 给多个老师打分数
list=[{desc:'陈老师',contextType:1,valueType2,desc:'王老师',contextType:2,valueType5
}]
<tr *ngFor="let item of list;"><td>{{item.desc}}</td><td><input type="radio" name="val{{item.contextType}}" [value]="1" [(ngModel)]="item.valueType" />好<input type="radio" name="val{{item.contextType}}" [value]="2" [(ngModel)]="item.valueType" />较好<input type="radio" name="val{{item.contextType}}" [value]="3" [(ngModel)]="item.valueType" />中<input type="radio" name="val{{item.contextType}}" [value]="4" [(ngModel)]="item.valueType" />较差<input type="radio" name="val{{item.contextType}}" [value]="5" [(ngModel)]="item.valueType" />差</td>
</tr>

组件出入值

html

<div class="modal fade" [id]="delId"><div class="modal-dialog mt-20 g-W"><div class="modal-content"><div class="modal-body"><div class="box-body"><div class="g-box"><i class="glyphicon glyphicon-remove-sign g-icon"></i><span class="g-ft">{{tagStr}}</span>	</div></div></div><div class="modal-footer"><button type="button" (click)="deleteClked()" class="btn btn-danger" >{{tagConfigStr}}</button><button type="button" class="btn btn-default" data-dismiss="modal">返回</button></div></div></div>
</div>

Ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';@Component({selector: 'app-delete-confirm',templateUrl: './delete-confirm.component.html',styleUrls: ['./delete-confirm.component.scss']
})
export class DeleteConfirmComponent implements OnInit {@Output() deleteClk = new EventEmitter<any>();@Input()delId = 'delete';@Input()tagStr = '是否确认删除';@Input()tagConfigStr = '删除';constructor() { }deleteClked() {this.deleteClk.emit();}ngOnInit() {}
}

其它页面使用

<app-delete-confirm [delId]="" [tagStr]="'是否确认完结'" [tagConfigStr]="'完结'" (deleteClk)="onEnd()">
</app-delete-confirm>

路径跳转

后台跳转传值

this.router.navigate(['Main/ProjectManagement/ProjectDetail'], {queryParams: {id: item.projectsManageID,}
});

a标签跳转

<a routerLink='/Main' class="btn btn-success btn-block btn-flat"  style="background-color: #1b998b;border-color: #1b998b;">登录</a>

分页

1.可以在前端设置分页大小

-- html 分页控件包裹着table
<app-pagination-box [pageInfo]="OutputModel" (pageChange)="onPageChange($event)"><table class="table table-bordered table-hover table-striped"></table>
</app-pagination-box>-- ts分页
onPageChange(pageInfo) {this.InputModel.pageNO = pageInfo.pageNO;this.InputModel.pageSize = pageInfo.pageSize;setTimeout(() => {this.getListPage();});
}

2.只能点击页数

-- html
<app-pagination [totalPage]="OutputModel.totalPages" [currentPage]="OutputModel.pageNO"[totalCount]="OutputModel.dataCount" (pageChanges)="onPageChangeOne($event)">
</app-pagination>-- ts分页
onPageChangeOne(pageNO: number) {this.InputModel.pageNO = pageNO;setTimeout(() => {this.getListPage();});
}

单选全选

-- html
<table class="table table-bordered table-hover table-striped"><thead><tr><th style="width:5px;"><div class="pretty p-icon p-smooth"><input type="checkbox" [ngModel]="checkEvent()" (click)="selectAll($event)" /><div class="state p-success"><i class="icon fa fa-check"></i><label></label></div></div></th></tr></thead><tbody><tr *ngFor="let item of OutputModel.listData; let i = index"><td style="width:5px;"><div class="pretty p-icon p-smooth"><input type="checkbox" [(ngModel)]="item.isCheck" /><div class="state p-success"><i class="icon fa fa-check"></i><label></label></div></div></td></tr></tbody>
</table>-- Ts
selectAll(ev: any) {if (ev.target.checked) {this.OutputModel.listData.forEach(item => item.isCheck = true);} else {this.OutputModel.listData.forEach(item => item.isCheck = false);}
}checkEvent() {if (this.OutputModel.listData && this.OutputModel.listData.length !== 0) {const ret = this.OutputModel.listData.filter(item => {return item.isCheck === false;});if (ret.length === 0) {return true;}}
}

上传附件

css

.file {padding: 6px 12px;width: 82px;height: 34px;position: relative;display: inline-block;background: #3c8dbc;border-color: #367fa9;border: #367fa9;border-radius: 3px;overflow: hidden;color: #fff;text-decoration: none;text-indent: 0;line-height: 1.5;font-size: 14px;vertical-align: middle;top: 2px;margin-right: 6px;}.file input {position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;}.file:hover {background: #3c8dbc;border-color: #367fa9;color: #fff;text-decoration: none;cursor: pointer;}/* table多行显示 */
.hide_line_text_td {overflow: hidden;/*超出部分隐藏*/text-overflow:ellipsis;/* 超出部分显示省略号 */white-space: nowrap;/*规定段落中的文本不进行换行 */max-width: 150px;/*需要配合宽度来使用*/
}.hide_muitl_line_text_td {padding: 0px;display: -webkit-box;/* autoprefixer: off */-webkit-box-orient: vertical !important;/* autoprefixer: on */-webkit-line-clamp: 3;overflow: hidden;max-width: 490px;
}

html

<div class="row"><div class="col-md-12"><div class="form-group"><a href="javascript:;" class="file">上传附件<input type="file" id="uploadInput" name="file" (change)="createFile()"></a><!-- <button type="button" class="btn btn-danger mr-2">删除</button> --></div></div>
</div>

Ts

// 上传文件
createFile() {const formData = new FormData();const modelFile = $('#uploadInput').prop('files')[0];const ext = modelFile.name.substr(modelFile.name.lastIndexOf('.') + 1).toLowerCase();if (ext !== 'png' ) {// 只能上传.png...}formData.append('file', modelFile);this.baseDataService.UploadAccessoryMaintenance(formData).subscribe((params) => {});
}// 通过路径下载文件
onDownFile(blobUrl: any) {const a = document.createElement('a');a.style.display = 'none';a.download = '工作底稿';a.href = this.serviceBase.downloadPath + blobUrl;a.click();}// 通过File类型 下载private handlePreview(file) {var blob = new Blob([file], { type: 'application/vnd.ms-excel' });var ele = document.createElement("a");ele.download = "项目表.xls";ele.href = URL.createObjectURL(blob);ele.style.display = "none";document.body.appendChild(ele);ele.click();document.body.removeChild(ele);}

Service

// 使用invokeFormData上传文件方法
UploadAccessoryMaintenance(model: any): Observable<any> {return this.serviceBase.invokeFormData('AccessoryMaintenance/UploadAccessoryMaintenance', model);
}//使用invokeResouces 下载

日期控件

html

ngMpdel赋不上值可以将type=‘date’ 然后通过value赋值

<input type="number" class="form-control radius" [(ngModel)]="model.date" 
placeholder="请选择日期" bsDatepicker readonly [bsConfig]="bsConfig">

ts

import { BsLocaleService, BsDatepickerConfig, BsDatepickerViewMode } from 'ngx-bootstrap/datepicker';
bsConfig: Partial<BsDatepickerConfig>;
minMode: BsDatepickerViewMode = 'year';
locale = 'zh-cn';
colorTheme = 'theme-dark-blue';ngOnInit() {// 日期配置this.bsConfig = Object.assign({}, {dateInputFormat: 'YYYY-MM-DD',containerClass: this.colorTheme, minMode: this.minMode,showWeekNumbers: false,adaptivePosition: true});// 日期使用中文this.localeService.use(this.locale);
}

RoutingModule配置

这里主要介绍单个参数值接收

const routes: Routes = [{ path: 'EstablishProject', component: EstablishProjectComponent },{ path: 'EstablishProject/:state', component: EstablishProjectComponent },
];

Menu 页面Html设置

<a *ngIf="item.children.length==0 && item.routingUrl && item.urlParameter"[routerLink]='[item.routingUrl]' [queryParams]="getQueryParams(item.urlParameter)" (click)="onClick(item)"><i [class]="item.menuIcon"></i>{{item.menuName}} {{ rla.isActive ? '(当前)' : ''}}
</a>

Menu 页面Ts设置

getQueryParams(params: string) {try {return JSON.parse(params);} catch {return { 0: params };}
}

页面取值

this.activatedRoute.params.subscribe((parms) => {parms['state']
});

fromEvent监听事件

service

private selAuditTypeSub = new BehaviorSubject('');setSelAuditTypeSub(val) {this.selAuditTypeSub.next(val);
}getSelAuditTypeSub() {return this.selAuditTypeSub.asObservable();
}

ts1

SelAuditTypeSub: Subscription;ngOnDestroy() {this.SelAuditTypeSub.unsubscribe();
}ngOnInit() {// 构建下拉框的值更改的桥梁this.SelAuditTypeSub = fromEvent(document.querySelector('#selectAuditType'),'input').subscribe((target) => {const selValue = (target.target as any).value;this.projectManageService.setSelAuditTypeSub(selValue);});
}
ngOnDestroy() {this.SelAuditTypeSub.unsubscribe();
}

ts2

sub: Subscription;
ngOnInit() {// 下拉框值更改，这里就可以拿到想要的值并操作this.sub = this.projectManageService.getSelAuditTypeSub().subscribe((params) => {拿到selValue的值});
}ngOnDestroy() {this.sub.unsubscribe();
}

angular树结构

1. 页面.html （自封装组件装饰器 1.2有一个文本框值接收）

1.1 <app-tree [items]="tree" (valueChange)="onTreeSelect($event)" [canSelectParentNode]="true"></app-tree>1.2 <app-dropdown-treeview-select [items]="tree" [canSelectParentNode]="true" 
(valueChange)="onTreeSelect($event)" [value]="checkPointModel.parentID"></app-dropdown-treeview-select>

2. 页面.ts

  // 从model转换为tree想要的格式private joinTreeModel(objList: Array<CheckPointInfoOutputModel>) {const _self = this;const treeByYear = new Array<TreeviewItem>();objList.forEach(function (item, index, arr) {// html tree接收的[item]固定格式  Array<TreeviewItem>const tempTree = new TreeviewItem({ text: '', value: '', children: [] });tempTree.text = item.checkCodeStr;tempTree.value = item.checkID;treeByYear.push(tempTree);if (item.child && item.child.length > 0) {tempTree.children = _self.joinTreeModel(item.child);}});return treeByYear;}

angular生成二维码

1. QrCode 根据Angular版本引用不同的QrCode

2. 全局引用

3. html记得最外面留一点白框，否则手机能扫出来，但是机器扫不出来

   <div><qrcode [qrdata]="OrderNo" [level]="'M'"></qrcode><div class="dialog-bottom">{{ OrderNo }}</div>
   </div>
   

4. 效果图
   

angular引用js

1. 下载js，放置项目文件夹中，引用
   

2. 页面直接import