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-สร้าง
• ซีแอล-คลาส
• ส่วนประกอบ C
• d-คำสั่ง
• e-enum
• M-โมดูล
• p-ไปป์
• เอส-เซอร์วิส

หมายเหตุ

อย่าสร้างไฟล์ทดสอบหน่วย

 --spec=falses

ตั้งค่าสไตล์เริ่มต้น

โครงการใหม่:

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

ตั้งอยู่ในโปรเจ็กต์ที่มีอยู่:

แก้ไขไฟล์ angular.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 ) ;
    }
  }