React中如何引入Angular组件详解
前言
为了在我的编辑器中使用 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 见:
repo 见:
这个时候,我遇到了一个问题,我使用 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 左右的大小。
不论是不是一个经量级的方案,但是它至少证明了组件复用的可行性。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
上一篇: 血管逐渐堵塞的原因及保养方法!
下一篇: Flink+Kafka整合的实例