今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

明天计划的事情：（一定要写非常细致的内容） 

遇到的问题：（遇到什么困难，怎么解决的） 

收获：（通过今天的学习，学到了什么知识）

1.在[新增]里插入了富文本编辑器

富文本编辑器有很多选择,这里选择了由国人开发的轻量级编辑器wangEditor

根据官方文档下载,引用的时候出了点问题.

这款编辑器主要是针对原生js或者JQ,并没有针对angular7的插入方法,按照文档的引入需要引用require.js即需要在html文件里添加

<script data-main="./main.js" src="//cdn.bootcss.com/require.js/2.3.3/require.js"></script>

一开始我在[新增]组件里面添加这个,发现报错,经过师兄提醒之后把这个放在脚手架的index.html里面才是对的.

这行代码里面的data-main="./main.js"  这个main.js里面的代码可以直接写在组件的ts文件里.

开始并不知道怎么引用,师兄教导 CommonJS就是现在angular插入的雏形,实际上可以用这个方法

ts代码如下

ngOnInit() {

   this.editorcontent = new E('#editor')

   this.editorcontent.create()

}

2.为[新增]通过按钮禁用添加了一个简单的表单验证

[新增]这里的要求是所有的选项都要有数据才能点上传的按钮,有两种方法,一是设置按钮禁用,二是添加表单验证.

这里是添加了按钮禁用,然后给按钮禁用的true/false添加条件.

一般来说条件都直接写在html的[disabled]="条件"里面,如果"条件"是函数的话则需要return 布尔值.

<button class="btn-danger btn1" id="btn1" [disabled]="btn()" (click)="exponline()">立即上线</button>

<button class="btn-success btn2" id="btn2" [disabled]="btn()" (click)="expsave()">存为草稿</button>

btn(){

  if(this.addtitle && this.addtype && this.addurl &&this.editorcontent.txt.html()!=="<p><br></p>"  &&     this.img.img.url){

   return false;

    } else {

   return  true;

    }

 }

this.editorcontent.txt.html()就是富文本编辑器获取到的内容,这里的判断条件this.editorcontent.txt.html()!=="<p><br></p>"是因为当富文本编辑器没有输入内容的时候,获取到的html()是<p><br></p>,所以需要加上这个条件

写好判断之后发现了一个问题,我寻思着这好像不会自动获取,是不是要给获取数据写一个监听,或者放到哪个钩子里面.

询问师兄后让我console一下,发现这个玩意儿默认带了监听的功能,即时输入数据即时监听到变化并即时获取数据,一下省去解决一个问题的烦恼