ng zhihuDaily
1.0.0
Um aplicativo zhihuDaily angular!
DEMONSTRAÇÃO >>
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
ilustrar:
- g-gerar
- classe cl
- componente c
- diretiva d
- e-enum
- módulo m
- tubo P
- serviço s
--spec=falses
Novo projeto:
ng new {project-name} --style=scss
Definido em um projeto existente:
Modifique manualmente o arquivo angular.json e adicione o seguinte conteúdo:
"schematics" : {
"@schematics/angular:component" : {
"styleext" : " scss "
}
},
Crie um novo arquivo 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 ;
}
}
}
introduzir
import { SliceStrPipe } from '../pipe/slicestr.pipe'
// ...
@ NgModule ( {
declarations : [
SliceStrPipe
] ,
// ...
} )
usar
< p class =" title " > {{item.title|SliceStr: 0:20:'...'}} </ p >
Novo
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 ) ;
}
}