node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »

portal-frontend

关于AOT需要注意以下几点

  • 使用templateUrl or styleUrls代替require
      // 错误
      @Component({
        selector: 'dashboard-table',
        encapsulation: ViewEncapsulation.None,
        template: require('./dashboard.html'),
        styles: [require('./dashboard.scss')]
      })
     
      // 正确
      @Component({
        selector: 'dashboard-table',
        encapsulation: ViewEncapsulation.None,
        templateUrl: './dashboard.html',
        styleUrls: ['./dashboard.scss']
      })
  • *.Module.ts,别用export default
      // 错误
      @NgModule({
        declarations: [
          License
        ],
        exports: [
          License
        ]
      })
      export default class LicenseModule { }
     
      // 正确
      @NgModule({
        declarations: [
          License
        ],
        exports: [
          License
        ]
      })
      export class LicenseModule { }
  • 路由里的用法
      // export default class LicenseModule
      { path: 'system', loadChildren: './portal/system/system.module' }
      // export class LicenseModule
      { path: 'system', loadChildren: './portal/system/system.module#SystemModule' }
  • @Inputs, @Outputs, View or Content Child(ren), Hostbindings以及其它在template中使用的fields, function等,在类里要使用public
  <button type="button" [disabled]="!isShowBtn" class="btn btn-primary" name="button">上传证书</button>
  // 错误
  private isShowBtn: boolean = false;
 
  // 正确
  isShowBtn: boolean = false;
  public isShowBtn: boolean = false;
  • 类型检查,如:
  show: Boolean; // 错误
 
  show: boolean; // 正确
  • 模板中别用control.errors?.someError, 用control.hasError(‘someError’)

组件用法

2016.12.20 一. 新添加上传文件功能 1.package 位置(src/app/theme/components/baFileUpload) 2.用法 (详见 #/forms/layouts) a.drop 拖拽 <div baFileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" [uploader]="uploader" class="well my-drop-zone"> 被拖拽区域一 b.单个文件上传 <input type="file" baFileSelect [uploader]="uploader" /> c.多个文件上传 <input class="m-b" type="file" baFileSelect [uploader]="uploader" multiple />
3.回调函数 public uploadFile() { let _t = this; this.uploader.queue[0].onSuccess = function (response, status, headers) { _t.responHide(); if (status === 200) { if (JSON.parse(response).code === 0) { let tempRes = JSON.parse(response).data; _t.uploadAgent = tempRes; _t.uploadAgent["size"] = Number(JSON.parse(response).data.sizeInBytes/(1024*1024)).toFixed(2); _t.uploadAgent["category"] = JSON.parse(response).data.type.name; _t.ref.markForCheck(); _t.ref.detectChanges(); }else { _t.toaster.showError('', JSON.parse(response).msg); } } }; this.uploader.queue[0].upload(); // 开始上传 } 二. 动态布局 1.package 位置(src/app/theme/components/baWidget) 2.用法 (详见 #/dynamicLayout) 1) 配置 文件 a.定义界面的每一个模块的样式 src/assets/json/dashboard.define.json 例如: {"row":[ { "col":{ "style":{ "clazz":"col-sm-6", "height":"100", "isShadow":true }, "title":"namea", "widget":"widget1" } } ] } row 是每一行 col 是每一列 style clazz 样式class height 高 isShadow 是否阴影显示 title 标题 widget 布局,对应 json 文件(详细格式见下一个json)

        b. widget 配置文件 (src/app/common/widget.ts)
            "widget1": {
              template: "widger1.html",
              data: "assets/json/widget/widgetData/widget.json"
            }

            widget1:widget的标识,与上面的 widget1 对应
                template: wiger 显示的 html
                data:     data  显示的数据

12.28 1.baAutoTable新增加 模糊查询 用法:需要在模块的 service 定义 keyWordParam(判断根据哪些字段判断),格式为数组,例如: protected keyWordParam=['email','uname'];

登录改版 去掉 JSON.parse(localStorage.getItem("roleList"))

6.7

autoTable 完善查询自定义条件 在模块中修改 query 的查询条件,用法定义格式正确的查询条件,例子如下:

引用 import {GlobalState} from '../../../../../global.state';

用法 public getQuery() { let obj = { 'keyWord': 123123123 }; this._state.notifyDataChanged('table.query', obj); }

6.9

baContentTop 操作文本 (1)隐藏或者显示

引用 import {GlobalState} from '../../../../../global.state';

构造函数 let o = { 'isShow': false }; this._state.notifyDataChanged('menu.hidden', o);

退出(显示) ngOnDestroy(): void { let o = { 'isShow': true }; this._state.notifyDataChanged('menu.hidden', o); }

(2) 更改text 文字 let o = { 'title': "运营大数据平台" }; this._state.notifyDataChanged('menu.activeLink', o);

6.13 baCard 新加加载样式 两种用法 (1) 显示 let o = { 'isLoading': true }; this._state.notifyDataChanged('baCard.loading', o);

(2) 当界面有多个 ba-card 时候指定加载某一个 bacard; [_baCardLoading]="baCardLoading"

(3) 自定义 baCard 的显示内容 注意: title 是有操作的标题,比如 路由和链接 titleArea 只有文本显示,没有任何操作 public customBaCard; this.customBaCard = { 'title': '更多', //标题 'routerLink': '/fulltextSearch/search', //路由 'href': 'http://baidu.com', //链接 'textArea': 'ahsdf;dafkdsl' //单独显示文本,没人任何操作 }; 6.14 三栏结构标题 ngAfterViewInit() { jQuery('#content-top').css('margin-left', '220px'); } ngOnDestroy(): void { jQuery('#content-top').css('margin-left', '0px'); }

6.30 BaAutoTable 默认不query 在子 service 中定义 public notInitQuery: boolean = false;