延时函数

setTimeout(()=>{ console.log("延时打印") },10000); // 延时10秒打印 //简单等数据加载完才显示主要的页面 1、先下载ngx-loading模块 npm install --save ngx-loading 2、在app.module.ts中引入NgxLoadingModule模块 import {NgxLoadingModule} from 'ngx-loading'; imports: [ BrowserModule, AppRoutingModule, NgxLoadingModule.forRoot({ fullScreenBackdrop:true, //全屏 backdropBorderRadius:'3px' // 框的弧度 }), ], 3、在component.ts中添加isload属性 isload=false; ngOnInit() { let that = this; that.isload = true; // 延时函数 setTimeout(()=>{ console.log("延时打印") that.isload = false },5000); } // 先渲染页面，后再反应typescript 4、html文中 <div style="background-color: red;width: 400px;height: 500px;"> 大帅锅，啊哈哈哈哈 </div> <ngx-loading [show]="isload"></ngx-loading>

上传文件到后端

前端 1、html部分 <input multiple type="file" accept="{{acceptType}}" name="uploadfile" (change)="UploadAndViewImg($event)"> 2、component.ts部分 acceptType = "image/jp2,image/jpe,image/jpeg,image/jpg,image/png,image/svf,image/tif,image/tiff,image/dwg,image/dxf,image/gif"; url = ":8080/upload" constructor( private http:HttpClient ) { } ngOnInit() { } UploadAndViewImg(event){ console.log("event.target.files=",event.target.files); if(!event.target.files||event.target.files.length==0){ console.log("上传文件失败"); return; } let that = this; let fileCount = event.target.files.length let s = 1024*50; console.log("fileCount=",JSON.stringify(fileCount)) for(var i=0;i<fileCount;i++){ let size = event.target.files[i].size/1024; //计算多少KB console.log("size =",size); that.uploadFile(event.target.files[i]) } } // 上传文件 uploadFile(file:File){ console.log(file) const formData = new FormData(); formData.append('file',file,file.name); //这边可以使得传输的内容是数组形式 console.log("uploadFile =",JSON.stringify(formData)) //JSON.stringify返字符串 this.http.post(this.url,formData).subscribe((response:any)=>{ console.log(response) // 默认接收json对象 }) } 3、go后端接收 package main import( "log" "os" "io/ioutil" "encoding/json" "net/http" ) func upload(w http.ResponseWriter,r *http.Request){ r.ParseForm() if r.Method != "POST"{ log.Println("接受的请求不是POST请求") return } w.Header().Set("Access-Control-Allow-Origin","*") //允许访问所有的域 w.Header().Set("Access-Control-Allow-Headers","Content-Type") w.Header().Set("content-type","application/json") file,_,err := r.FormFile("file") if err!=nil{ log.Println("获取表单值错误：",err) return } f,err:=os.OpenFile("test.jpg",os.O_CREATE|os.O_APPEND,0777) if err!=nil{ log.Println("打开文件失败",err) return } defer f.Close() body,err := ioutil.ReadAll(file) if err!=nil{ log.Println("转化为[]byte失败",err) return } f.Write(body) data := make(map[string]string) data["str"]="data" jStr,_:=json.Marshal(data) w.Write(jStr) return } func main(){ log.Println("接收文件") http.HandleFunc("/upload",upload) http.ListenAndServe(":8080",nil) }

富文本框编辑框（ckeditor)

1、下载富文本编辑框 npm install --save @ckeditor/ckeditor5-angular npm install @ckeditor/ckeditor5-build-classic 2、在app.module.ts中添加 import {CKEditorModule} from '@ckeditor/ckeditor5-angular' imports: [ BrowserModule, AppRoutingModule, HttpClientModule, CKEditorModule, NgxLoadingModule.forRoot({ fullScreenBackdrop:true, //全屏 backdropBorderRadius:'3px' }), ], 3、在component.ts文件中 import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; public Editor = ClassicEditor;（不在constructor实例化） 4、在html中写入 <ckeditor [editor]="Editor" data="Hello world"></ckeditor> 5、汉化，鼠标悬浮显示中文 component.ts文件 import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js'; // 汉化 // 配置语言 public config = { language:'zh-cn' }; html文件 <ckeditor [editor]="Editor" [config]="config" data="Hello world"></ckeditor> 6、获取ckeditor内容 component.ts // 获取ckeditor中的内容 article = {content:''}; getData(){ console.log(this.article.content) } html代码 <ckeditor [editor]="Editor" [config]="config" [(ngModel)]="article.content" data="Hello world"></ckeditor> <button (click)="getData()">获取富文本框内容</button>

angular延时函数和数据加载完才显示主要的页面、上传文件到后端、富文本框编辑框（ckeditor)