ng zhihuDaily

تم تنفيذ تطبيق Zhihu Daily باستخدام الزاوي

تطبيق zhihuDaily الزاوي!

العرض >>

كومة التكنولوجيا

• الزاويه 6
• com.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

يوضح:

• ز-إنشاء
• cl-class
• ج-مكون
• د- التوجيه
• التعداد الإلكتروني
• وحدة م
• 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 ) ;
    }
  }