style: update navigation app

Author: stbui

src/app/navigation/navigation.component.html

@@ -6,6 +6,7 @@
   </mat-card>
 </div>
 
+
 <div fxLayout="row" fxLayoutWrap>
   <div fxFlex="100" fxFlex.gt-md="20" fxFlex.gt-sm="33.3" fxFlex.gt-xs="50" *ngFor="let navigation of currentNum">
     <stbui-loading-skeleton></stbui-loading-skeleton>
@@ -14,7 +15,7 @@
   <div fxFlex="100" fxFlex.gt-md="20" fxFlex.gt-sm="33.3" fxFlex.gt-xs="50" *ngFor="let list of lists">
     <mat-card class="nav-item">
       <div class="nav-item-mask">
-        <div class="nav-item-logo" style=""></div>
+        <div class="nav-item-logo" [ngStyle]="{'background-image': ''}"></div>
       </div>
 
       <mat-card-header>

src/app/navigation/navigation.component.ts

@@ -6,7 +6,6 @@ import { Component, OnInit, Inject } from '@angular/core';
   styleUrls: ['./navigation.component.scss']
 })
 export class NavigationComponent implements OnInit {
-
   navigations;
   categories: object;
   currentPage;
@@ -16,32 +15,32 @@ export class NavigationComponent implements OnInit {
   // skeleton screen
   currentNum = new Array(20);
 
-  lists
+  lists;
 
-  constructor(@Inject('NavigationService') private service) {
-  }
+  constructor(@Inject('NavigationService') private service) {}
 
   ngOnInit() {
     this.getNavs();
     this.getCategories();
 
-    this.service.getList().subscribe(res => {
-      this.lists = res;
-    })
+    // this.service.getList().subscribe(res => {
+    //   this.lists = res;
+    // })
   }
 
   getNavs(id: any = '', page: any = '') {
     this.service.getNavs(id, page);
     this.service.navigations.subscribe(res => {
-      this.navigations = res.data;
+      // this.navigations = res.data;
+      this.lists = res.data;
       this.totalPages = res.totalPages;
       this.currentPage = res.currentPage;
       this.hideLoading();
     });
   }
 
   getCategories() {
-    this.service.getCategories().subscribe(res => this.categories = res.data);
+    this.service.getCategories().subscribe(res => (this.categories = res.data));
   }
 
   findNavLists(id: any) {
@@ -59,15 +58,14 @@ export class NavigationComponent implements OnInit {
 
   hideLoading() {
     // 延时显示效果
-    setTimeout(() => this.currentNum = new Array(0), 1000);
+    setTimeout(() => (this.currentNum = new Array(0)), 1000);
   }
 
   showLoading() {
     this.currentNum = new Array(20);
   }
 
   selectedTagChange(tag) {
-    console.log(tag);
     this.findNavLists(tag.id);
   }
 }

src/app/navigation/navigation.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
 
 import { SharedModule } from '../shared/shared.module';
-import { TagSelectModule, LoadingModule } from '../component';
+import { TagSelectModule, LoadingModule, GithubButtonModule } from '../component';
 
 import { NavigationComponent } from './navigation.component';
 import { NavigationRoutingModule } from './navigation.routing';
@@ -16,7 +16,8 @@ import { PaginationModule } from '../component';
     NavigationRoutingModule,
     PaginationModule,
     TagSelectModule,
-    LoadingModule
+    LoadingModule,
+    GithubButtonModule
   ],
   declarations: [NavigationComponent],
   providers: [{ provide: 'NavigationService', useClass: NavigationService }]

src/assets/data/navigation/links.json

@@ -4,6 +4,21 @@
   "numsPerPage": 20,
   "currentPage": 1,
   "data": [
+    {
+      "id": 1,
+      "title": "angular-material-app",
+      "link": "https://github.com/stbui/angular-material-app",
+      "description": "基于最新Angular 5框架与Material 2技术的企业级通用管理系统快速开发框架",
+      "link_github": "https://github.com/stbui/angular-material-app",
+      "tag": "",
+      "image_link": "",
+      "sort_order": 1,
+      "user_id": 1,
+      "catalog_id": 621,
+      "topic_id": 8,
+      "status_is": "Y",
+      "create_time": 0
+    },
     {
       "id": 4357,
       "title": "WebStorm",