ng zhihuDaily

Zhihu Daily App implemented using angular

A angular zhihuDaily app!

DEMO >>

technology stack

• angular 6
• rxjs
• element-angular

use

Start

npm i / yarn
npm start

Build

npm run build / npm run prod

Add functionality

ng g cl my-new-class #新建 class
ng g c my-new-component #新建组件
ng g d my-new-directive #新建指令
ng g e my-new-enum #新建枚举
ng g m my-new-module #新建模块
ng g p my-new-pipe #新建管道
ng g s my-new-service #新建服务
ng g m route --routing #新建 route

illustrate:

• g-generate
• cl-class
• c-component
• d-directive
• e-enum
• m-module
• p-pipe
• s-service

Remark

Do not generate unit test files

 --spec=falses

Set default style

New project:

ng new {project-name} --style=scss  

Set in an existing project:

Manually modify the angular.json file and add the following content:

 "schematics" : {  
  "@schematics/angular:component" : {  
       "styleext" : " scss "  
   }  
 },

Custom pipeline

Cut string

• Create a new pipeline file

   import { Pipe , PipeTransform } from '@angular/core'
  
  @ Pipe ( {
    name : 'SliceStr'
  } )
  
  export class SliceStrPipe implements PipeTransform {
    // start和end及extraStr后面都跟随了一个问好，代表这个为可选参数而不是必选的
    // 功能就是给出截图的启示，然后是否拼接你自定义的字符串(...)等
    transform ( value : string , start ?: number , end ?: number , extraStr ?: string ) : string {
      if ( value ) {
        if ( typeof ( start ) === 'number' && typeof ( end ) === 'number' ) {
          if ( value . length > end && extraStr && typeof ( extraStr ) === 'string' ) {
            return value . slice ( start , end ) + extraStr . toString ( ) ;
          } else {
            return value . slice ( start , end ) ;
          }
        } else {
          return value ;
        }
      } else {
        return value ;
      }
    }
  }

• introduce

   import { SliceStrPipe } from '../pipe/slicestr.pipe'
  // ...
  @ NgModule ( {
    declarations : [
      SliceStrPipe
    ] ,
    // ...
  } )

• use

   < p class =" title " > {{item.title|SliceStr: 0:20:'...'}} </ p > 

innerHTML sets CSS style

• New

   import { Pipe , PipeTransform } from "@angular/core" ;
  import { DomSanitizer } from '@angular/platform-browser' ;
  
  @ Pipe ( {
    name : 'safeHtml'
  } )
  
  export class SafeHtmlPipe implements PipeTransform {
    constructor ( private sanitized : DomSanitizer ) { }
  
    transform ( value ) {
      console . log ( value )
      return this . sanitized . bypassSecurityTrustHtml ( value ) ;
    }
  }