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 左右的大小。

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

总结

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