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 相关文章推荐
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
Jquery读取URL参数小例子
2013/08/30 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Python实现不规则图形填充的思路
2020/02/02 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
Python实现括号匹配方法详解
2020/02/10 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
学校门卫工作职责
2013/12/07 职场文书
毕业生自荐书
2014/02/03 职场文书
小班评语大全
2014/05/04 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python