ReactでAnglarコンポーネントをどうやって導入しますか？

前言
私のエディタでAnglarを使うために、Anglarでリネーム機能を作成しました。それを使うためには、もう一度customEventを利用したいですが、このマイクロフロントエンドアーキテクチャのシステムでは、そのイベント通信メカニズムはかなり複雑です。この部分のコードがさらに悪化する前に、他の方法があるかどうか試してみます。そこで、他のコンポーネントで使っていたWeb Components技術を思い出しましたが、Anglar 6はちょうどサポートできます。
以下は多く話しません。詳しく紹介してみましょう。
HTMLにWeb Componentsを導入
私に必要なことも簡単です。私のコンポーネントを一つのcustomElementsに登録するだけで、ap.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) => {
 ...
})

Anglarを用いて構築されたWeb Componentsコンポーネントが利用できることが実証された。そこで、私はReactにAnglarのセットを導入したほうがいいと思います。
ReactにAnglarコンポーネントを導入する
そこで、creat-react-apを使って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パラメータはAnglarコードに成功的に伝達されますが、actionはまだできていないようです。しかし、将来には間違いなく利用できます。
デモ見：https://phodal.github.io/wc-angular-demo/
Repo見：https://github.com/phodal/wc-angular-demo
この時、私は一つの問題に遭遇しました。アングラーを使って構築したこのコンポーネントは大体257 kbあります。この大きさのセットですが、ちょっと怖いです。
Web Componentsフレーム構築コンポーネント
これらのマイクロフロントエンド関連の記事では、Stencilと同様の形で、コンポーネントを直接Web Components形式のコンポーネントに構築し、その後、ReactまたはAnglarなどの対応する対応する構成要素に直接参照することを指摘する。
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>);
 }
}

それを使って作ったセットは、大体30 kbぐらいの大きさでできます。
級のあるスキームでないにかかわらず、少なくともコンポーネント多重の実現可能性を証明している。
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。