ng zhihuDaily

각도를 사용하여 구현된 Zhihu Daily 앱

각진 zhihuDaily 앱!

데모 >>

기술 스택

• 각도 6
• rxjs
• 요소 각도

사용

시작

npm i / yarn
npm start

짓다

npm run build / npm run prod

기능 추가

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

설명하다:

• g 생성
• cl급
• c 성분
• d-지시어
• e-열거형
• m-모듈
• p-파이프
• S-서비스

주목

단위 테스트 파일을 생성하지 않음

 --spec=falses

기본 스타일 설정

새 프로젝트:

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

기존 프로젝트에 설정:

angle.json 파일을 수동으로 수정하고 다음 콘텐츠를 추가합니다.

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

커스텀 파이프라인

끈 자르기

• 새 파이프라인 파일 생성

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

• 소개하다

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

• 사용

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

innerHTML은 CSS 스타일을 설정합니다.

• 새로운

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