angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
类别:编程学习 浏览量:2612
时间:2021-10-02 01:44:43 angular兄弟组件调用方法
Angular封装WangEditor富文本组件的方法富文本组件是web程序中很常用的一个组件,特别是要开发一个博客,论坛这类的网站后台。
得益于Angular的强大,封装WangEditor组件非常简单
1.使用yarn或者npm安装wangeditor
yarn add wangeditor
2.创建一个Angular的组件
ng g c q-wang-editor
3.封装组件逻辑
3.1 模板
<li #wang></li>
3.2 ts逻辑
import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import E from "wangeditor" import hljs from 'highlight.js' import "node_modules/highlight.js/styles/xcode.css" @Component({ selector: 'q-wang-editor', templateUrl: './q-wang-editor.component.html', styleUrls: [ './q-wang-editor.component.less', '../../../../../node_modules/highlight.js/styles/xcode.css'], encapsulation: ViewEncapsulation.None, }) export class QWangEditorComponent implements OnInit, ControlValueAccessor,OnDestroy { @ViewChild("wang") editor!: ElementRef; @Input() value: string = ''; @Input() height = 300; @Output() valueChange = new EventEmitter(); onChange: ((value: string) => {}) | undefined; html = '' wangEditor: E | undefined; constructor() { } ngOnDestroy(): void { this.wangEditor?.destroy(); } writeValue(obj: any): void { this.html = obj; this.wangEditor?.txt.html(this.html) } registerOnChange(fn: any): void { } registerOnTouched(fn: any): void { } ngOnInit(): void { setTimeout(() => { this.wangEditor = new E(this.editor.nativeElement) this.wangEditor.config.zIndex = 500; this.wangEditor.config.height = this.height this.wangEditor.highlight = hljs; this.wangEditor.config.onchange = (html: any) => { this.valueChange.emit(html) if (this.onChange) { this.onChange(html); } } this.wangEditor.config.onchangeTimeout = 500; this.wangEditor.create(); this.wangEditor.txt.html(this.html) }, 200); } }
大致思路:
- 使用ViewChild引用html的dom元素
- 在OnInit的成功后,初始化WangEditor编辑器,把模板中的ElementRef放入到WangEditor的容器中去,让WangEditor去控制界面的dom操作。
- 实现ControlValueAccessor,让这个组件支持Angular的表单验证。
- 实现ngOnDestroy,组件在销毁的时候,调用WangEditor的destory
4.使用组件
<q-wang-editor [height]="550"></q-wang-editor>
5.效果预览
6.最后
一个WangEditor的Angular组件封装就基本完成了。如果需要更多功能,比如图片上传,等可以再根据自己的需求增加功能即可
到此这篇关于Angular封装WangEditor富文本组件的文章就介绍到这了,更多相关Angular WangEditor富文本组件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- angular教程第九讲(浅谈Angular的12个经典问题)
- angular引入组件库(详解Angular组件之中间人模式)
- angular简单介绍(详解Angular依赖注入)
- vue react和angular(详解React Angular Vue三大前端技术)
- angular怎么把组件用在根组件里(详解Angular组件之投影)
- angular快速创建模块指令(详解Angular项目中共享模块的实现)
- angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
- angular开发详解(详解Angular动态组件)
- angular 常用模块(详解Angular之路由基础)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- angular路由树(详解Angular路由之子路由)
- angular怎么创建声明(使用Angular CDK实现一个Service弹出Toast组件功能)
- angular开发详解(详解Angular组件生命周期一)
- angular组件化(详解Angular父子组件通讯)
- angular使用方法(Angular环境搭建及简单体验小结)
- angular封装公共组件(详解Angular组件之生命周期二)
- 鞠婧祎和杨紫两种风格的女生,你心里谁比较美(鞠婧祎和杨紫两种风格的女生)
- 三千年第一美女鞠婧祎出演白素贞pk杨紫,颜值胜赵雅芝王祖贤(三千年第一美女鞠婧祎出演白素贞pk杨紫)
- 成都轨道交通13号线一期工程最新进展(成都轨道交通13号线一期工程最新进展)
- 越南没事(越南没事情做)
- 重庆旅游攻略(重庆旅游3-4天攻略最佳线路)
- 周杰伦演唱会门票(周杰伦演唱会门票多少钱一张2023)
热门推荐
- 宝塔面板7.8.0软件商店打不开(宝塔BT面板专业版付费和免费版有什么区别?)
- sqlserver数据库的对象有哪些(详解SQL Server数据库架构和对象、定义数据完整性)
- python对象创建流程(Python3.5面向对象与继承图文实例详解)
- mysql索引原理及调优(mysql高级学习之索引的优劣势及规则使用)
- SQL Server锁类型
- python统一支付接口(Python实现的微信支付方式总结三种方式)
- mysql数据类型和使用方法(MySQL数据类型全解析)
- Response.Expires的用法
- idea 部署到tomcat 的项目在哪儿(使用IDEA创建Web项目并发布到tomcat的操作方法)
- boostrap弹幕效果(boostrap modal 闪现问题的解决方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9