Angular2 在使用过程中与 Angular 1.x 版本有很大区别。
一. 先说一下笔者感受,主要为以下几点:
1.Angular2 将页面组件化,方面其它页面调用此页面。公共页面,弹出消息框,model 框 等都可以组件化。
2.页面 在调用这些组件很简单,在 html 中 写下相应标签代码。例如分页组件(可写为
(此处数据为双向绑定,原理类似于自定义html标签)
(pageChanged)="pageChanged($event)",此处在 ts 文件中为一个回掉函数,在 ts 代码中重写该函数,此处函数作用是分页组件页数发生变化时,会自动执行的函数,
[firstText]="firstText" 是向组件传值 使用方法,组件中 需要用@Input()接收传递的值。
。
3.开发人员主要逻辑体现在在 ts文件,页面是 html 代码体现 。
4.ts 代码类似于 java 代码,同样有封装,继承,构造方法等,子类可以继承父类。
5.每个页面都有生命周期,我们可以重写相对应的函数,实现相应功能。详情请查看官方文档。
二.angular2使用tinymce富文本编辑器
1.先看下效果
2. 代码实现
1.在 package.json 加上依赖 "tinymce": "^4.5.0",使用 npm install 进行下载安装。
2.ts 代码初始化
// 初始化编辑器
initEditor() {
if (this.editor) return;
tinymce.init({
selector: '#post_editor',
language: 'zh_CN',
plugins: [
'advlist autolink lists link charmap print preview hr anchor pagebreak media',
'searchreplace wordcount visualblocks visualchars code fullscreen ',
'insertdatetime nonbreaking save table contextmenu directionality ',
'paste textcolor colorpicker textpattern'
],
toolbar1: ' fullscreen insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link ',
toolbar2: 'print preview | forecolor backcolor media ',
height:"480",
image_advtab: true,
menubar: true,
setup: editor => {
this.editor = editor;
}
});
}
ngOnDestroy() {
// 销毁编辑器
this.channelId=null;
tinymce.remove(this.editor);
}
2.html 代码
您的帮助是我莫大的鼓励!喜欢的话可以扫描左侧二维码随意打赏哈~支付宝微信都可以,欢迎看看我的其他文章~
这篇文章目前收到了不少朋友的支持,在这里谢谢你们了,打赏有价,支持与鼓励无价!
本次本次 分享就到这里,使用过程中如果大家遇到问题请留言,欢迎指正和探讨,愿与你共同进步