前言
創(chuàng)新互聯(lián)2013年開創(chuàng)至今,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目成都網(wǎng)站制作、網(wǎng)站建設(shè)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命,1280元碭山做網(wǎng)站,已為上家服務(wù),為碭山各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575
為了在我的編輯器中使用 Angular,我用 Angular 編寫了一個(gè)重命名功能。而為了使用它,我得再次使用一次 customEvent ,而在這個(gè)微前端架構(gòu)的系統(tǒng)中,其事件通訊機(jī)制已經(jīng)相當(dāng)?shù)膹?fù)雜。在這部分的代碼進(jìn)一步惡化之前,我得嘗試有沒有別的方式。于是,我想到了之前在其它組件中使用的 Web Components 技術(shù),而 Angular 6 正好可以支持。
下面話不多說了,來一起看看詳細(xì)的介紹吧
HTML 中引入 Web Components
我所需要做的事情也相當(dāng)?shù)暮唵?,只需要將我的組件注冊為一個(gè) customElements,稍微改一下 app.module.ts 文件。在這種情況之下,我們就可以構(gòu)建出獨(dú)立于框架的組件。
如下是原始的 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 中傳遞參數(shù): <interact-bar filename="phodal.md"></interact-bar>
,或者監(jiān)聽對應(yīng)的 @Output 事件:
const bar = document.querySelector('interact-bar'); bar.addEventListener('action', (event: any) => { ... })
事實(shí)證明,使用 Angular 構(gòu)建的 Web Components 組件是可以用的。于是,我便想,不如在 React 中引入 Angular 組件吧。
React 中引入 Angular 組件
于是,便使用 create-react-app 創(chuàng)建了一個(gè) DEMO,然后引入組件:
<div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2 className="App-title">Welcome to React</h2> </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 參數(shù)可以成功地傳遞到 Angular 代碼中,而 action 在當(dāng)前似乎還不行。但是毫無疑問,它在未來是可用的。
Demo 見: https://phodal.github.io/wc-angular-demo/
Repo 見: https://github.com/phodal/wc-angular-demo
這個(gè)時(shí)候,我遇到了一個(gè)問題,我使用 Angular 構(gòu)建的這個(gè)組件,大概是有 257kb。這個(gè)大小的組件,但是有點(diǎn)恐怖。
Web Components 框架構(gòu)建組件
在那些微前端相關(guān)的文章中,我們指出類似于 Stencil 的形式,將組件直接構(gòu)建成 Web Components 形式的組件,隨后在對應(yīng)的諸如,如 React 或者 Angular 中直接引用。
如下是一個(gè)使用 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>); } }
使用它構(gòu)建出來的組件,大概可以在 30kb 左右的大小。
不論是不是一個(gè)經(jīng)量級的方案,但是它至少證明了組件復(fù)用的可行性。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對創(chuàng)新互聯(lián)的支持。
網(wǎng)站題目:React中如何引入Angular組件詳解
標(biāo)題網(wǎng)址:http://bm7419.com/article18/jjiogp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、網(wǎng)站維護(hù)、全網(wǎng)營銷推廣、自適應(yīng)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)