安装@asushiye/ngx-core库

安装&使用
  1.如何安装
  2.如何使用
    日志跟踪服务
    拦截跟踪http请求
    公用类
功能列表

提示： 该文件来源： asu-learning/angular-learning/7增强模块\5库开发\2实战演练\create-ngx-core.md

安装&使用

ng new quickstart  --stype=css --routing=false --strict=true  # 新建项目

当然也可以在已存在项目中使用

1. 如何安装
2. 如何使用

1.如何安装

在项目根路径下, 执行安装命令

npm install @asushiye/ngx-core      # 假如发布latest 标记版本， 推荐使用
npm install @asushiye/[email protected] 

2.如何使用

导入模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgxCoreModule } from '@asushiye/ngx-core';

@NgModule({
  declarations: [ AppComponent ],
  imports: [BrowserModule, NgxCoreModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

日志跟踪服务

import { Component } from '@angular/core';
import { TrackerService, Result } from '@asushiye/ngx-core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  result: Result<any> = { status: true, code: 200, msg: 'success', data: null };
  constructor(private tracker: TrackerService){ }
  addLog(){
    this.tracker.debug('dddd');
  } 
}

<p>@asushiye/ngx-core</p>
<p>{{result|json}}}</p>

<button (click)="addLog()">name</button>
<ngx-core-logger></ngx-core-tracker>

拦截跟踪http请求

注册跟踪拦截器

import { TrackerInterceptor } from '@asushiye/ngx-core';

const INTERCEPTOR_PROVIDES = [
  { provide: HTTP_INTERCEPTORS, useClass: TrackerInterceptor, multi: true },
];
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [...INTERCEPTOR_PROVIDES],
  bootstrap: [AppComponent],
})
export class AppModule {}

定义跟踪组件路由

import { TrackerComponent } from '@asushiye/ngx-core';
const routes: Routes = [
  { path: 'tracker', component: TrackerComponent },
  ];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: environment.useHash,
      scrollPositionRestoration: 'top',
      enableTracing: !environment.production
    }),
  ],
  exports: [RouterModule],
})
export class RouteRoutingModule {}

定义跟踪页面

        <!-- asushiye -->
        <div nz-menu-item routerLink="/tracker">
          <i nz-icon nzType="info" class="mr-sm"></i>
          {{ 'menu.account.tracker' | translate }}
        </div> 

公用类

对于class类和服务类，直接导入就可以使用

import { Result } from '@asushiye/ngx-core';
import { TrackerService } from '@asushiye/ngx-core';

功能列表

export * from './lib/ngx-core.module';
export * from './lib/system/result/result';
export * from './lib/system/result/page';
export * from './lib/system/dto/dto';

export * from './lib/tracker/tracker.component';
export * from './lib/tracker/tracker.service';
export * from './lib/tracker/tracker-interceptor';

export * from './lib/cache/cache.service';
export * from './lib/error/http-error-handler.service';

下一步行动