安装@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.如何安装
在项目根路径下, 执行安装命令
npm install @asushiye/ngx-core # 假如发布latest 标记版本, 推荐使用
npm install @asushiye/ngx-core@11.2.4
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';