前言
为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能。而为了使用它,我得再次使用一次 customEvent ,而在这个微前端架构的系统中,其事件通讯机制已经相当的复杂。在这部分的代码进一步恶化之前,我得尝试有没有别的方式。于是,我想到了之前在其它组件中使用的 Web Components 技术,而 Angular 6 正好可以支持。
下面话不多说了,来一起看看详细的介绍吧
HTML 中引入 Web Components
我所需要做的事情也相当的简单,只需要将我的组件注册为一个 customElements,稍微改一下 app.module.ts 文件。在这种情况之下,我们就可以构建出独立于框架的组件。
如下是原始的 module 文件:
rush:js;">
@NgModule({
decl
arations: [AppComponent],imports: [
browserModule],bootstrap: [AppComponent]
})
export class AppModule { }
如下则是新的 module 文件:
rush:js;">
@NgModule({
decl
arations: [In
teractBar],entryComponents: [In
teractBar]
})
export class AppModule {
constructor(private injector: Injector) {
const in
teractBar = createCustomElement(In
teractBar,{injector});
customElements.define('in
teract-bar',in
teractBar);
}
}
然后,只需要就可以在 HTML 中传递参数: teract-bar filename="phodal.md">
,或者监听对应的 @Output 事件:
{
...
})
事实证明,使用 Angular 构建的 Web Components 组件是可以用的。于是,我便想,不如在 React 中引入 Angular 组件吧。
React 中引入 Angular 组件
于是,便使用 create-react-app 创建了一个 DEMO,然后引入组件:
rush:xhtml;">
src/App.js and save to reload.
rush:js;">
@Component({
tag: 'phodit-header',styleUrl: 'phodit-header.css'
})
export class PhoditHeader {
@State() showCloseHeader = false;
componentDidLoad() {...}
handleClick() {...}
render() {
if (this.showCloseHeader) {...}
return (
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。