1. event废弃

event事件废弃，需要调用事件传入$event获取。

2. 光标锁定

@ViewChildren(LqTextboxComponent) Inputs: QueryList;
this.Inputs.toArray()[4].focus();

3. 抽屉按钮

{
text: ‘删除’,
onclick: async (data) => {
const ID = data.id ? data.id : null;
if (!ID) {
return;
}
await this.service.deleteSmtToDip(ID);
this.Search();
},
visble: (data) => data.rqty === ‘已接收’ // 返回true显示
}

4. 匹配ip地址

constisValid = /^((2[0-4]\d|25[0-5]|[01]?\d\d?).){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/;

5. 原生table属性

  1. .tab-html thead {
  2.   display: table;
  3.   table-layout: fixed;
  4.   height: 35px;
  5. }
  6. .tab-html thead tr th {
  7.   background-color: #e9eef2;
  8. }
  9. .tab-html thead tr td:nth-last-of-type(1) {
  10.   box-sizing: border-box;
  11.   border: 0;
  12. }
  13. .tab-html tbody {
  14.   display: block;
  15.   height: 161px;
  16.   padding-right: 35px;
  17. }
  18. .tab-html .tbody {
  19.   overflow-y: scroll;
  20.   overflow-x: hidden;
  21.   /*滚动条样式*/
  22.   &::-webkit-scrollbar {
  23.     width: 5px;
  24.     /*height: 4px;*/
  25.   }
  26.   &::-webkit-scrollbar-thumb {
  27.     border-radius: 10px;
  28.     -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  29.     background: rgba(0, 0, 0, 0.2);
  30.   }
  31.   &::-webkit-scrollbar-track {
  32.     -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  33.     border-radius: 0;
  34.     background: rgba(0, 0, 0, 0.1);
  35.   }
  36. }
  37. .tab-html tbody tr {
  38.   display: table;
  39.   width: 100%;
  40.   table-layout: fixed;
  41. }
  43. // html
  44.  <table cellspacing="0" cellpadding="0" [border]="1" class="tab-html">
  45.             <thead
  46.               [style.width]="
  47.                 editRowTable.length > 5 ? 'calc(100% - 5px)' : '100%'
  48.               "
  49.             >
  50.               <tr>
  51.                 <th>序号</th>
  52.                 <th>不良现象</th>
  53.                 <th>描述</th>
  54.                 <th>位置</th>
  55.                 <th>是否维修</th>
  56.                 <th style="visibility: hidden; width: 35px"></th>
  57.               </tr>
  58.             </thead>
  59.             <tbody
  60.               [class]="
  61.                 editRowTable.length > 5 ? 'tbody editorhtml' : 'editorhtml'
  62.               "
  63.               (scroll)="scroll($event)"
  64.             >
  65.               <tr
  66.                 [class]="i === mouseenterIndex ? 'tr' : ''"
  67.                 *ngFor="let item of editRowTable; let i = index"
  68.                 (mouseover)="trMouseover(i)"
  69.                 (mouseout)="trMouseout()"
  70.                 (click)="trClick(item, i)"
  71.                 (dblclick)="trdbclick(i)"
  72.               >
  73.                 <td>{{ item.a }}</td>
  74.                 <td>{{ item.bmName }}</td>
  75.                 <td>{{ item.bmDescribe }}</td>
  76.                 <td>{{ item.location }}</td>
  77.                 <td style="position: relative">
  78.                   <lq-icon
  79.                     [iName]="
  80.                       item.defactResult ? 'lq-seleted' : 'lq-reduce-fill'
  81.                     "
  82.                     style="color: green"
  83.                     class="iconsize"
  84.                   ></lq-icon>
  85.                   <div
  86.                     [class]="i === mouseenterIndex ? 'visi2' : 'visi'"
  87.                     style="
  88.                       width: 14px;
  89.                       height: calc(100% + 2px);
  90.                       justify-content: center;
  91.                       align-items: center;
  92.                       position: absolute;
  93.                       top: -1px;
  94.                       right: -17px;
  95.                       background-color: #ffffff;
  96.                     "
  97.                   >
  98.                     <lq-icon
  99.                       class="iconsize"
  100.                       style="color: red"
  101.                       iName="lq-reduce-fill"
  102.                       (click)="tdIconClick(item, i)"
  103.                     ></lq-icon>
  104.                   </div>
  105.                 </td>
  106.               </tr>
  107.             </tbody>
  108.           </table>
  111. // 表格增加滚动条锁定最后
  112.   ngAfterViewChecked(): void {
  113.     // if (this.flag) {
  114.     //   const editorhtml = this.el.nativeElement.querySelector('.editorhtml');
  115.     //   editorhtml.scrollTop = editorhtml.scrollHeight - editorhtml.clientHeight;
  116.     //   this.flag = false;
  117.     // }
  118.   }
  119.   // 滚动不刷新滚动条位置
  120.   // scroll(e) {
  121.   //   this.flag = false;
  122.   // }

6. 原生上传图片

  1. .inp_span {
  2.   width: 100%;
  3.   height: 100%;
  4.   display: inline-block;
  5.   position: absolute;
  6.   left: 0;
  7.   bottom: -6px;
  8. }
  9. .span_div {
  10.   width: 140px;
  11.   height: 50px;
  12.   position: absolute;
  13.   left: 50%;
  14.   margin-left: -70px;
  15. }
  16. .icon {
  17.   display: block;
  18.   height: 30px;
  19.   position: absolute;
  20.   top: -3px;
  21.   left: 50%;
  22.   margin-left: -15px;
  23.   font-size: 30px;
  24.   ::ng-deep .anticon {
  25.     position: absolute;
  26.   }
  27. }
  28. .span_icon {
  29.   display: block;
  30.   width: 20px;
  31.   height: 20px;
  32.   position: absolute;
  33.   top: 2px;
  34.   left: 100%;
  35.   margin-left: 5px;
  36.   font-size: 20px;
  37.   cursor: pointer;
  38.   ::ng-deep .anticon {
  39.     position: absolute;
  40.     left: 0;
  41.   }
  42. }
  43. .span_div:hover > .icon {
  44.   color: red;
  45. }
  46. .lab {
  47.   width: 140px;
  48.   height: 50px;
  49.   position: absolute;
  50.   left: 50%;
  51.   bottom: 0;
  52.   margin-left: -70px;
  53.   box-sizing: border-box;
  54.   cursor: pointer;
  55.   -webkit-user-select: none;
  56.   -moz-user-select: none;
  57.   user-select: none;
  58. }
  59. .span_div:hover > .lab {
  60.   color: red;
  61. }
  62. .file_span {
  63.   display: flex;
  64.   width: 200%;
  65.   height: 20px;
  66.   line-height: 20px;
  67.   position: absolute;
  68.   left: -50%;
  69.   top: 50%;
  70.   margin-top: -10px;
  71.   justify-content: center;
  72.   align-items: center;
  73. }
  74. .span_div:hover > .sdb_icon {
  75.   ::ng-deep .ng-star-inserted {
  76.     color: red;
  77.   }
  78. }
  80. // html
  81. <div style="user-select: none">图片路径</div>
  82.     <div lq-row [lqGutter]="20">
  83.       <div lq-col [lqSpan]="24">
  84.         <div
  85.           style="
  86.             width: 100%;
  87.             min-height: 72px;
  88.             border: 1px dashed #ddd;
  89.             border-radius: 4px;
  90.             font-size: 15px;
  91.             color: #b7bdc0;
  92.             text-align: center;
  93.             line-height: 83px;
  94.             position: relative;
  95.           "
  96.         >
  97.           <span class="inp_span">
  98.             <div class="span_div">
  99.               <lq-icon
  100.                 *ngIf="fileList.length === 0"
  101.                 iName="lq-upload"
  102.                 class="icon"
  103.               ></lq-icon>
  104.               <label *ngIf="fileList.length === 0" for="file" class="lab"
  105.                 >点击上传图片</label
  106.               >
  107.               <span *ngIf="fileList.length !== 0" class="file_span"
  108.                 ><span style="position: relative">
  109.                   {{ this.fileList[0].name }}
  110.                   <lq-icon
  111.                     iName="lq-ashbin"
  112.                     class="span_icon"
  113.                     (click)="icon_click()"
  114.                   ></lq-icon>
  115.                 </span>
  116.               </span>
  117.             </div>
  118.             <input
  119.               style="visibility: hidden"
  120.               id="file"
  121.               type="file"
  122.               name="file"
  123.               multiple="multiple"
  124.               accept="image/jpeg,image/jpg,image/png"
  125.               (change)="fileOnChange($event)"
  126.             />
  127.           </span>
  128.         </div>
  129.       </div>
  130.     </div>
  133. // 上传图片
  134.   async fileOnChange(e) {
  135.     this.fileInput = e.target;
  136.     const files = e.target.files[0]; // 上传数据流
  137.     const val = e.target.value; // 路径
  138.     if (e.target.files && files) {
  139.       if (files.size > 1024 * 1024 * 3) {
  140.         this.fileInput = {};
  141.         this.util.Toast('图片大小不能大于3M！', 'warning');
  142.         return false;
  143.       }
  144.     }
  145.     const reader = new FileReader();
  146.     reader.readAsDataURL(e.target.files[0]);
  147.     reader.onload = ((files) => { //fils-元素标签， 这里是将图片转成base64格式
  148.       return (e) => {
  149.         this.filePath = e.target.result; // base64文件流
  150.       };
  151.     })(files);
  152.     this.fileList = [...files];
  153.     // 如果value和title不同时清掉选同一个会选不上，已经存在了
  154.     this.fileInput.value = '';
  155.     this.fileInput.title = '';
  156.     console.log(this.fileInput, 'this.fileInput');
  157.   }
  158.   // icon_click
  159.   icon_click() {
  160.     this.filePath = '';
  161.     this.fileInput = {};
  162.     this.fileList = [];
  163.   }

7. ChangeDetectorRef ChangeDetectionStrategy

7.1 ChangeDetectorRef ：

angular 会在我们的组件发生变化的时候，对我们的组件执行变化检测，如果检测到我们的数据发生了变化，就会执行某些操作，如修改绑定数据的时候更新视图。这样一来，当我们的组件数据比较多的时候，angular就会有很多操作在静悄悄地进行，因此，就需要ChangeDetectorRef来实时检测数据的变化并更新视图数据

  1. import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
  2. /**
  3. *markForCheck() - 当输入已更改或视图中发生了事件时，组件通常会标记为脏的（需要重新渲染）。调用此方法会确保即使那些触发器没有被触发，也仍然检查该组件。<br>在组件的 metadata 中如果设置了 changeDetection: ChangeDetectionStrategy.OnPush 条件，那么变化检测不会再次执行，除非手动调用该方法。
  4. *detach() - 从变化检测树中分离变化检测器，该组件的变化检测器将不再执行变化检测，除非手动调用 reattach() 方法。
  5. *reattach() - 重新添加已分离的变化检测器，使得该组件及其子组件都能执行变化检测
  6. *detectChanges() - 从该组件到各个子组件执行一次变化检测 检查该视图及其子视图。与 <a href="https://angular.cn/api/core/ChangeDetectorRef#detach">detach</a> 结合使用可以实现局部变更检测。
  7. *checkNoChanges() - 检查变更检测器及其子检测器，如果检测到任何更改，则抛出异常。
  8. */
  9. constructor(
  10.     private navMenuTabService: NavMenuTabService,
  11.     private cd: ChangeDetectorRef // 注册
  12.     private changeDetection:ChangeDetectionStrategy.OnPush // 只需要加入在这里就可以
  13.   ) { }
  15. async TabSelectedClick() {
  16.     await this.selectedIndexChange.emit(this.selectedIndex);
  17.     this.cd.detectChanges(); // 实时检测页面及其子元素的变化
  18.   }

onPush()策略时 浅拷贝数据触发输入属性的变化以触发检查

7.2 ChangeDetectionStrategy

默认变更检测器用来检测更改的策略。设置后，将在下次触发变更检测时生效。
子组件的属性的变化由输入属性决定，那么这个时候就可以启用OnPush这种变更检测策略，这样输入属性不变的时候就不用检测了.

8. HttpClient

  1. <span
  2.                 *ngIf="this.Item.FileName && Item.DisposeReuslt === '特批'"
  3.                 class="inp_span"
  4.               >
  5.                 <lq-icon iName="lq-attachent"></lq-icon>
  6.                 <span>{{ this.Item.FileName }}</span>
  7.                 <lq-icon
  8.                   iName="lq-upload"
  9.                   style="color: red; margin-left: 6px"
  10.                   (click)="exClick()"
  11.                 ></lq-icon>
  12.               </span>
  1. import { HttpClient } from '@angular/common/http';
  3. constructor(
  4.     private http: HttpClient // 用http请求接口
  5.   ) { }
  7.   async exClick() {
  8.     this.http.post(this.apiConfigure.rootUrl + '/WMS/odata/OqcMains/DowOqcFile', {
  9.       fileName: this.Item.FileName,
  10.       fileUrl: this.Item.FilePath
  11.     }, { responseType: 'blob' }).subscribe(res => {
  12.       this.downloadFile(res, this.Item.FileName);
  13.     });
  15.   }
  17.   downloadFile(data: Blob, fileName: string) {
  18.     const blob = new Blob([data]);
  19.     const url = window.URL.createObjectURL(blob);
  20.     const a = document.createElement('a');
  21.     a.href = url;
  22.     a.download = fileName;
  23.     a.click();
  24.     window.URL.revokeObjectURL(url);
  25.   }

9. 发布订阅模式

  1. unSub() {
  2.     return this.subject.unsubscribe();
  3.   }
  5.   使用此模式销毁，在谷歌浏览器报错，需要引入rxjs的Subscription
  6.   subscription = new Subscription();