在 Angular 中调用任意 React/Vue 库

• 理论上可以调用任意 React/Vue 库

演示

• https://wszgrcy.github.io/cyia-bridge/

简介

• 在 Angular 中调用 React/Vue 库,使 React/Vue 库像(Angular)原生组件一样使用
• 可以把 Angular 包装成 React/Vue 组件,供 React/Vue 使用

  目前仅 Angular 内

使用

• 需要在 17.2.0 以上的版本使用
• react 中为react-outlet,vue 中为vue-outlet

import { VueOutlet } from '@cyia/ngx-bridge/vue-outlet';
@Component({
  imports: [VueOutlet],
  template:``
})

import { ReactOutlet } from '@cyia/ngx-bridge/react-outlet';
@Component({
  imports: [ReactOutlet],
  template:``
})

根组件

• 相当于 React/Vue 的render(xxx)

root参数默认为是否存在父级react-outlet wrapperToReact调用的组件内如果有outlet,顶级react-outlet需要root设置false(因为被调用,存在父级)

<react-outlet [component]="xxxx" [root]="true" #root></react-outlet>

子组件(children)

• 在react-outlet投影中的都叫子组件,包括投影的投影

<!-- 直接子组件,也就是react-outlet的子级 -->
<react-outlet [component]="xxxx" #child></react-outlet>
<!-- 非直接子组件,父级不是react-outlet,但是父级的?级有react-outlet -->
<react-outlet [component]="xxxx" [parent]="root"></react-outlet>

Angular 组件作为 react 子组件(如果需要 react 上下文的情况下)

• 继承 ComponentInReact

<xxx [parent]="root"></xxx>

Angular 组件作为 React 组件的某个属性传入

• 视情况传入元素或函数组件

wrapperToReact(xxxx, {}).reactFunctionComponent;
wrapperToReact(xxxx, {}).reactElement;

react 中调用 Angular 组件

• 虽然开发中尽量减少这种情况出现,但是也没法杜绝

<NgOutletReact component={OutletRefTestComponent}></NgOutletReact>

react指令

• 使用react-outlet包裹任意一个标签/组件.
• 推荐用于react-dnd等功能类的库

@Component({
//...
  imports: [ ReactOutletDirective],
//..
})

  <div
    data-testid="box"
    [style]="ref.output()?.['style']"
    *reactOutlet="
      boxContext | curry : item;
      root: false;
      parent: root;
      let ref = reactOutlet
    "
  >
    {{ ref.output()?.["name"] }}
  </div>

配置修改

• 假如您使用 tsx 文件,请修改tsconfig.json

  "compilerOptions": {
    "jsx": "react-jsx"
  },

• angular.json

 "prerender": false

一般新项目中会自动开启

zone

• 设计上:React/Vue 环境中任何组件都应该在<root>中

• 设计上:向 ng 发出的任何信号都应该在angular中

• 设计上:任何 ng 组件初始化时都应该在angular中

• 如果你发现某种情况下不符合上面情况,请去提issue,可能是库的原因

已知问题

• children 是根据投影插入的,这就会导致当出现时是 ng 组件先初始化,然后初始化 React/Vue 组件,然后销毁的时候是 ng 先销毁,再销毁对应的组件
• 这会导致 Vue 的内置组件Transition在销毁时的动画无法正常播放.可以使用bridge-child控制,但是缺点就是[enable]="false"时内部投影不会消失,仅仅是不被插入

已测试库

react

• reactflow
• slate
• @tiptap
• react-hot-toast
• @react-pdf
• antd
• react-icons
• react-spinners
• react-dnd
• react-hook-form

vue

• vue 部分大多数是组件库,有意思的库比较少....
• ant-design-vue
• 内置 Transition

关于开源

• https://github.com/wszgrcy/cyia-bridge star 超过 100 后开源.没有的话说明也没有人使用...也没必要开源了

changelog

0.0.11

• 支持reactOutlet指令
• ref属性会被自动定义为react-outlet的elementRef.nativeElement

如果需要也可以添加属性支持绑定其他元素

0.0.6

• 销毁交给桥接的库控制(但是投影不会销毁,仅仅是不显示)

  BridgeChild

• 增加柯里化管道,用于事件传递时传入额外参数

  CurryPipe

0.0.5

• 支持 vue 库调用
• 一些导出重命名

0.0.4

• 修复 zone 相关.

  react => <root>