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

标签：mda   return   uil   order   编辑框   sub   nil   cal   代码   

• 延时函数

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 = "http://localhost: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)

标签：mda   return   uil   order   编辑框   sub   nil   cal   代码   

原文地址：https://www.cnblogs.com/MyUniverse/p/11832470.html