用户管理-列表开发

src/app/components/components.module.ts

@@ -1,9 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { PageTopModule } from './page-top/page-top.module'  //头部
-import { ToastModule } from './toast/toast.module'    //消息提示
-import { SidebarMenuModule } from './sidebar-menu/sidebar-menu.module'
+import { PageTopModule } from './page-top/page-top.module';  //头部
+import { ToastModule } from './toast/toast.module';    //消息提示
+import { SidebarMenuModule } from './sidebar-menu/sidebar-menu.module';
+import { RequestStatusComponent } from './request-status/request-status.component';
+import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
+
+import { registerLocaleData } from '@angular/common';
+import zh from '@angular/common/locales/zh';
+registerLocaleData(zh);
 
 @NgModule({
     imports: [
@@ -11,12 +17,17 @@ import { SidebarMenuModule } from './sidebar-menu/sidebar-menu.module'
         PageTopModule,
         ToastModule,
         SidebarMenuModule,
+        NgZorroAntdModule
     ],
-    declarations: [],
+    declarations: [
+        RequestStatusComponent,
+    ],
+    providers   : [ { provide: NZ_I18N, useValue: zh_CN } ],
     exports: [
         PageTopModule,
         ToastModule,
         SidebarMenuModule,
+        RequestStatusComponent,
     ]
 })
 export class ComponentsModule { }

src/app/components/request-status/request-status.component.html

@@ -0,0 +1,13 @@
+<div *ngIf="statusParams.status!=3" class="position-center-box">
+	<div class="loading-icon" *ngIf="statusParams.status==1">
+		<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
+	</div>
+	<div class="warning-icon" *ngIf="statusParams.status==0">
+		<i nz-icon type="disconnect" theme="outline"></i>
+		<span class="result-text">请求失败</span>
+	</div>
+	<div class="data-null" *ngIf="statusParams.status==4">
+		<span class="result-text">暂无数据</span>
+	</div>
+</div>
+

src/app/components/request-status/request-status.component.scss

@@ -0,0 +1,23 @@
+.position-center-box{
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+	text-align: center;
+	.loading-icon{
+		color: #1890ff;
+	}
+	.warning-icon{
+		color: orange
+	}
+	.data-null{
+
+	}
+	i{
+		font-size: 40px;
+	}
+	.result-text{
+		display: block;
+		padding-top: 10px;
+	}
+}

src/app/components/request-status/request-status.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RequestStatusComponent } from './request-status.component';
+
+describe('RequestStatusComponent', () => {
+  let component: RequestStatusComponent;
+  let fixture: ComponentFixture<RequestStatusComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RequestStatusComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RequestStatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/request-status/request-status.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit,Input } from '@angular/core';
+
+@Component({
+  selector: 'app-request-status',
+  templateUrl: './request-status.component.html',
+  styleUrls: ['./request-status.component.scss']
+})
+export class RequestStatusComponent implements OnInit {
+	//该组件使用，要求父级标签position：relative。
+	@Input() statusParams={		
+		status:1,	  //接口的状态，0请求失败 1请求前loading 2请求中 3请求成功，有数据  4请求成功，无数据 
+	}
+	constructor() { }
+
+	ngOnInit() {
+	}
+
+}