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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
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生成HTML静态页面实例代码
2008/08/31 PHP
php class类的用法详细总结
2013/10/17 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
采用call方式实现js继承
2014/05/20 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python得到windows自启动列表的方法
2018/10/14 Python
python实现三次样条插值
2018/12/17 Python
实例介绍Python中整型
2019/02/11 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
pygame实现打字游戏
2021/02/19 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
python如何判断IP地址合法性
2020/04/05 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
Yahoo-PHP面试题2
2014/12/06 面试题
数据库什么时候应该被重组
2012/11/02 面试题
转党组织关系介绍信
2014/01/08 职场文书
会计实训报告范文
2014/11/04 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
检讨书模板大全
2015/05/07 职场文书
交通安全学习心得体会
2016/01/18 职场文书