ng zhihuDaily

Zhihu Daily App implémenté à l'aide d'angular

Une application zhihuDaily angulaire !

DÉMO >>

pile technologique

• angulaire 6
• rxjs
• élément angulaire

utiliser

Commencer

npm i / yarn
npm start

Construire

npm run build / npm run prod

Ajouter des fonctionnalités

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

illustrer:

• g-générer
• classe cl
• composant c
• directive d
• e-énumération
• module m
• tuyau en P
• service s

Remarque

Ne pas générer de fichiers de tests unitaires

 --spec=falses

Définir le style par défaut

Nouveau projet :

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

Situé dans un projet existant :

Modifiez manuellement le fichier angulaire.json et ajoutez le contenu suivant :

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

Pipeline personnalisé

Couper la ficelle

• Créer un nouveau fichier de pipeline

   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 ;
      }
    }
  }

• introduire

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

• utiliser

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

innerHTML définit le style CSS

• Nouveau

   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 ) ;
    }
  }