Angular6 笔记（1）_angular app.config.ts-CSDN博客

本文链接：https://blog.csdn.net/qq_36451496/article/details/84934542

本文档详细介绍了如何在app.config.ts中配置系统参数，包括系统名称、标识、版本及接口地址，同时提供了文件上传格式、正则表达式验证、密码输入限制、路由配置和列表显示优化的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.app.config.ts中进行系统参数配置：

export class AppConfig {
  //   系统配置
  app = {
    title: '朗朗供应商', //  系统名称
    systemName: 'xcloud', // 标识系统分类，根据不同系统进行配置
    code: 'zs',
    ver: '1.0'
  };
  //  参数配置
  setting: any = {
    expries_scope: 60 * 1000,                         //  刷新token的时间（失效前 【n】ms）
    pageSize: 10,                                     //  默认10条记录
    localhost_auth: 'http://10.80.0.121',            //  本地调试第三方登陆locahost跳转
    pageSizeOptions: [10, 20, 50, 100],               //  列表分页配置
    acceptPicType: 'image/png, image/jpeg, image/gif, image/bmp', // 支持上传的图片格式
    acceptFileType: 'image/png, image/jpeg, image/gif, image/bmp, .xls, .xlsx, .zip, .rar, .pdf, .doc, .docx', // 支持上传的文件格式
  };
  //  接口地址
  api: any = {
    // base_url: 'http://127.0.0.1:8080',
    base_url: 'http://' + window.location.host + '/api',
    service_urls: _.assign(
      fwApiConfigs,
      llApiConfigs,
    )
  };
}

若在其他文件中使用接收文件类型acceptFileType这个参数，则先导入app.config到组件中

import { GlobalProvider } from '../../../../../providers/common/global-provider';
import { AppConfig } from '../../../../../config/app.config';
......

在一个全局的服务GlobalProvider中也引入AppConfig，并声明private appConfig = new AppConfig();

写方法：

 /**
   * 文件上传格式支持
   */
  get acceptFileType() {
    return _.get(this.appConfig, 'setting.acceptFileType', '');
  }
  /**
   * 图片上传格式支持
   */
  get acceptPicType() {
    return _.get(this.appConfig, 'setting.acceptPicType', '');
  }

最后在使用这个参数的组件中声明一个接收文件类型的参数acceptFileType = ''; 然后在constructor中声明即可：

this.acceptFileType = this.globalProvider.acceptFileType;

2.framework.config.ts:框架服务接口配置

用于配置用户角色接口、字典接口、菜单接口、日志接口、文件上传接口等

langlang.config,ts:朗朗系统服务接口配置

用于配置本系统的专用的系统接口：

e.g:

/* 商户信息管理 */

'bizMerchantBasicGet': '/merchant/supply/bizMehantBasic/get', // 查询商户信息详情

'bizMerchantBasicList': '/merchant/supply/bizMerchantBasic/list', // 商户列表

'bizMerchantBasicSaveOrUpdate': '/merchant/supply/bizMerchantBasic/saveOrUpdate', // 更新商户信息

3.正则表达式:

e.g:

(?0\d{2}[) -]?\d{8}：首先是一个转义字符(,它能出现0次或1次(?),然后是一个0，后面跟着2个数字(\d{2})，然后是)或-或空格中的一个，它出现1次或不出现(?)，最后是8个数字(\d{8})。

ps:?表示出现1次或者不出现。

1：匹配身份证号
正则表达式：

(^\d{15}$)|(^\d{17}([0-9]|X)$)

2：匹配电子邮箱
正则表达式：

/^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i

3：匹配手机号
正则表达式：\d{3}-\d{8}|\d{4}-\d{7}
匹配形式如：（ 0511-4405222）
正则表达式：(^([0]\d{2}|\d{4}))(\d{6,7}$)
匹配形式如：（(021)1234567）

4：中国电话号码
正则表达式：((d{3,4})|d{3,4}-)?d{7,8}(-d{3})*
匹配形式如：0511-4405222 或者021-87888822 或者 021-44055520-555 或者 (0511)4405222

5：中国邮政编码
正则表达式：d{6}
匹配形式如：215421

4.密码输入限制：

限制为密码类型，不可以复制和粘贴，当用户右键单击打开上下文菜单时也返回false。

5.路由配置方法——页面的共用：

在模块的路由配置模块中进行页面的子路由配置：

/**
 * 子路由配置
 */
const childRoutes: Routes = [
  { path: '', redirectTo: 'list', pathMatch: 'full' },       //  默认路由
  { path: 'list', component: CommercialListComponent },
  {
    path: 'view/:type/:id',
    component: ViewComponent
  },
];

在页面组件中声明跳转的页面路由：

 /**
  * 更多操作
  * @param type
  * @param data
  */
  doOptions(type, data) {
    switch (type) {
      case '1':                     // 查看
        this.router.navigate(['../view', 'view', data.id], { relativeTo: this.activatedRoute });
        break;
      case '2':                     // 修改
        this.router.navigate(['../view', 'edit', data.id], { relativeTo: this.activatedRoute });
        break;
    }
  }

由此可以控制在不同的页面，字段的某些属性不同（例如是否显示、是否可以修改等属性）：在构造函数中取到activatedRoute的params，控制在不同的type下的不同属性：

 constructor(
    private fb: FormBuilder,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    public httpRequest: HttpClientRequestProvider,
    public notice: NoticeProvider,
    private uploadProvider: FileUploadProvider,
    private commercialProvider: CommercialProvider,
    private globalProvider: GlobalProvider,
    private xcValidator: XcValidatorsService,
    private dateUtil: DateUtilProvider,
  ) {
    this.acceptPicType = this.globalProvider.acceptPicType;

    this.activatedRoute.params.subscribe(params => {
      if (!_.isEmpty(params)) {                    // 根据修改或查看页面的type来控制
        this.optionType = params.type;
        if (this.optionType === 'view') {
          this.pageTitle = '商户信息详情';
          this.id = params.id;
          this.isAdd = false;
          this.isReadOnly = true;
        } else if (this.optionType === 'edit') {
          this.pageTitle = '修改商户信息';
          this.id = params.id;
          this.isAdd = false;
          this.isReadOnly = false;
        }
      }
    });
  }

6.列表内容显示不下？——隐藏部分字段并可鼠标悬浮显示完整字段：

<tbody>
<tr *ngFor="let data of ajaxTable.data; let i = index;">
     <td>{{(pageIndex-1)*pageSize + i + 1}}</td>
     <td class="overFont"><span title="{{data.username}}">{{data?.username}}</span></td>
     <td class="overFont"><span title="{{data.merchantShortName}{{data?.merchantShortName}}</span></td>
     <td class="overFont"><span title="{{data.merchantFullName}}{{data?.merchantFullName}}</span></td>
     <td class="overFont"><span title="{{data.createdDate | date : 'yyyy-MM-dd HH:mm:ss'}}">{{data?.createdDate | date : 'yyyy-MM-dd HH:mm:ss'}}</span></td>
      <td class="overFont"><span title="{{data.updatedDate | date : 'yyyy-MM-dd HH:mm:ss'}}">{{data?.updatedDate | date : 'yyyy-MM-dd HH:mm:ss'}}</span></td>
      <td>{{data?.merchantStatus | dictStatus : 'merchantStatus'}}</td>
      <td>
     <a class="ant-dropdown-link c-option (click)="doOptions('1',data)" title="查看">查看</a>
      <a class="ant-dropdown-link c-option" (click)="doOptions('2',data)" title="修改" *ngIf="data.merchantStatus !== '0'">修改</a>
      </td>
 </tr>
 </tbody>

在scss文件中：

// 超出文本显示省略号防止文本溢出

:host ::ng-deep .ant-table-small>.ant-table-content>.ant-table-scroll>.ant-table-body>table {

table-layout: fixed;

}