为了在我的编辑器中使用角,我用角编写了一个重命名功能。而为了使用它,我得再次使用一次customEvent。而在这个微前端架构的系统中,其事件通讯机制已经相当的复杂。在这部分的代码进一步恶化之前,我得尝试有没有别的方式。于是,我想到了之前在其它组件中使用的Web组件技术,而角6正好可以支持。
下面话不多说了,来一起看看详细的介绍吧
我所需要做的事情也相当的简单,只需要将我的组件注册为一个customElements,稍微改一下app.module。ts文件。在这种情况之下,我们就可以构建出独立于框架的组件。
如下是原始的模块文件:
@NgModule ({
声明:[AppComponent],
进口:[BrowserModule],
引导(AppComponent):
}）
出口类AppModule {}
如下则是新模块的文件:
@NgModule ({
声明:[InteractBar],
进口:[BrowserModule],
entryComponents (InteractBar):
}）
出口类AppModule {
构造函数(私人注射器:注射器){
const interactBar=createCustomElement (interactBar{喷射器});
customElements.define (interact-bar, interactBar);
}
}
然后,只需要就可以在HTML中传递参数:<代码> & lt; interact-bar文件名=皃hodal.md祝辞& lt;/interact-bar>
const酒吧=document.querySelector (“interact-bar”);
酒吧。addEventListener(‘行动’,(事件:任何)=比;{
…
})
事实证明,使用角构建的Web组件组件是可以用的。于是,我便想,不如在反应中引入角组件吧。
于是,便使用create-react-app创建了一个演示,然后引入组件:
& lt; div className=在“应用程序”;
& lt;头className=癆pp-header”比;
& lt; img src=https://www.yisu.com/zixun/{标志}className=癆pp-logo”alt="标志"/比;
& lt; h2 className=" App-title "祝辞欢迎React
& lt;/header>
& lt; p className=癆pp-intro”比;
首先,编辑& lt; code> src/App.js并保存重新加载。
& lt; interact-bar文件名=" phodal.com ">
@ component ({
标签:“phodit-header”,
styleUrl:“phodit-header.css”
}）
出口类PhoditHeader {
@State showCloseHeader=false ();
componentDidLoad () {…}
handleClick () {…}
呈现(){
如果(this.showCloseHeader) {…}
返回(& lt; div> & lt;/div>);
}
}
使用它构建出来的组件,大概可以在30 kb左右的大小。
不论是不是一个经量级的方案,但是它至少证明了组件复用的可行性。
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
