🤖
React Flow(xyflow) を Angular 18(SPA & SSR) で使う
最近のAngular(v16以降)でReactコンポーネント(=React Flow)をAngularから使う実装をしてみました。
Angular 16からは下記の新しいライフサイクルメソッドが追加されました。
- afterRender: 変更検知が行われる毎に実行されるメソッド
- afterNextRender: アプリケーションのレンダリング完了後に一回実行されるメソッド
これらAPIの仕様を考慮して実装してみます。
Angular からマウントする React Component のコード
NodeとEdgeを受け取ってReactFlowを描画するコンポーネントを用意します。
これをAngular側でマウントします。
Angular側からNodeとEdgeをプロパティで渡せるようにしてます。
React Component をマウントするAngular コンポーネント のコード
afterNextRenderでreact componentのマウントと初回レンダリング、
afterRenderで変更検知のタイミングでReactのレンダリングを事項するようにしています。
また、React Flowで描写するNodeとEdgeをAngularコンポーネントのプロパティから受け取れるようにしています。
React Component をマウントしたAngularコンポーネントを呼び出すコード
前記で示したAngularコンポーネントを呼び出すコードです。
プロパティで渡すNodeの座標をボタン押下で動的に書き換える処理を入れています。
ソースコード
実行結果
Discussion