React中如何引入Angular组件详解


Posted in Javascript onAugust 09, 2018

前言

为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能。而为了使用它,我得再次使用一次 customEvent ,而在这个微前端架构的系统中,其事件通讯机制已经相当的复杂。在这部分的代码进一步恶化之前,我得尝试有没有别的方式。于是,我想到了之前在其它组件中使用的 Web Components 技术,而 Angular 6 正好可以支持。

下面话不多说了,来一起看看详细的介绍吧

HTML 中引入 Web Components

我所需要做的事情也相当的简单,只需要将我的组件注册为一个 customElements,稍微改一下 app.module.ts 文件。在这种情况之下,我们就可以构建出独立于框架的组件。

如下是原始的 module 文件:

@NgModule({
 declarations: [AppComponent],
 imports: [BrowserModule],
 bootstrap: [AppComponent]
})
export class AppModule { }

如下则是新的 module 文件:

@NgModule({
 declarations: [InteractBar],
 imports: [BrowserModule],
 entryComponents: [InteractBar]
})
export class AppModule {
 constructor(private injector: Injector) {
 const interactBar = createCustomElement(InteractBar, {injector});
 customElements.define('interact-bar', interactBar);
 }
}

然后,只需要就可以在 HTML 中传递参数: <interact-bar filename="phodal.md"></interact-bar> ,或者监听对应的 @Output 事件:

const bar = document.querySelector('interact-bar');
bar.addEventListener('action', (event: any) => {
 ...
})

事实证明,使用 Angular 构建的 Web Components 组件是可以用的。于是,我便想,不如在 React 中引入 Angular 组件吧。

React 中引入 Angular 组件

于是,便使用 create-react-app 创建了一个 DEMO,然后引入组件:

<div className="App">
 <header className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 <h1 className="App-title">Welcome to React</h1>
 </header>
 <p className="App-intro">
 To get started, edit <code>src/App.js</code> and save to reload.
  <interact-bar filename="phodal.com" onAction={this.action}></interact-bar>
 </p>
</div>

嗯,it works。至少 filename 参数可以成功地传递到 Angular 代码中,而 action 在当前似乎还不行。但是毫无疑问,它在未来是可用的。

Demo 见: https://phodal.github.io/wc-angular-demo/

Repo 见: https://github.com/phodal/wc-angular-demo

这个时候,我遇到了一个问题,我使用 Angular 构建的这个组件,大概是有 257kb。这个大小的组件,但是有点恐怖。

Web Components 框架构建组件

在那些微前端相关的文章中,我们指出类似于 Stencil 的形式,将组件直接构建成 Web Components 形式的组件,随后在对应的诸如,如 React 或者 Angular 中直接引用。

如下是一个使用 Stencil 写的 Web Components 的例子:

@Component({
 tag: 'phodit-header',
 styleUrl: 'phodit-header.css'
})
export class PhoditHeader {
 @State() showCloseHeader = false;

 componentDidLoad() {...}
 handleClick() {...}

 render() {
 if (this.showCloseHeader) {...}
 return (<div></div>);
 }
}

使用它构建出来的组件,大概可以在 30kb 左右的大小。

不论是不是一个经量级的方案,但是它至少证明了组件复用的可行性。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
js实现弹窗效果
Aug 09 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 #jQuery
详解js的视频和音频采集
Aug 09 #Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 #Javascript
深入理解Promise.all
Aug 08 #Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 #Javascript
vue devtools的安装与使用教程
Aug 08 #Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 #jQuery
You might like
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
一个js实现的所谓的滑动门
2007/05/23 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
Javascript Object.extend
2010/05/18 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
python批量生成本地ip地址的方法
2015/03/23 Python
Python中的super用法详解
2015/05/28 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
python自动生成证件号的方法示例
2021/01/14 Python
Python读写Excel表格的方法
2021/03/02 Python
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
PHP面试题及答案一
2012/06/18 面试题
竞选演讲稿范文
2013/12/28 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
检讨书模板
2015/01/29 职场文书
世界文化遗产导游词
2019/08/07 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python