A angular zhihuDaily app!
- angular 6
- rxjs
- element-angular
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 - generate
- cl - class
- c - component
- d - directive
- e - enum
- m - module
- p - pipe
- s - service
--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>
-
新建
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); } }