portal-frontend v1.0.0

关于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">
          被拖拽区域一
      </div>
    b.单个文件上传
     <input type="file" baFileSelect [uploader]="uploader" />
    c.多个文件上传
     <input class="m-b" type="file" baFileSelect [uploader]="uploader" multiple  /><br/>
 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;