如何在 React 中使用现有的 Angular 服务？

Question

我是 React 的绝对初学者。我正在创建一个仅使用 App Component 的简单反应应用程序，并且我有自己的 Angular 库（NPM 包）和一个简单的服务。 Angular 服务在其构造函数中注入了一些依赖项。

我尝试使用inversifyJs，但没有运气。我收到以下错误。

这是我的反应代码 - corelib 是我自己的库

App.tsx

import React from 'react';
import "reflect-metadata";
import { TYPES, myContainer } from "./container-config";
import { CorelibService } from 'corelib'
import { inject } from 'inversify'

export default class App extends React.Component {
  @inject(TYPES.CORE_LIB) hostService: CorelibService;
  constructor(props: any) {
    super(props);
  }
  async componentDidMount() {
    const ninja = myContainer.get<CorelibService>(TYPES.CORE_LIB);
    console.log('ninja', ninja);
  }
  render() {
    return (
      <div>
        <h1>Welcome to React App</h1>
      </div>
    )
  }
}

container-config.ts

import "reflect-metadata";
import { Container, decorate, injectable } from 'inversify';
import { CorelibService, MyService } from 'corelib';

const TYPES = {
    CORE_LIB: Symbol.for("HostAppIntegration"),
    MY_SERVICE: Symbol.for("MyService")
};
export { TYPES }

decorate(injectable(), CorelibService);
decorate(injectable(), MyService);

const myContainer = new Container();
myContainer.bind<CorelibService>(TYPES.CORE_LIB).to(CorelibService);
myContainer.bind<MyService>(TYPES.MY_SERVICE).to(MyService);
export { myContainer };

这是 Angular 代码

Corelib.service.ts

import { Injectable } from '@angular/core';
import { MyService } from './my.serivce';

@Injectable({
  providedIn: 'root'
})
export class CorelibService {

  constructor(private myService: MyService) { }

  public sayHello() {
    console.log('Hello from sample angular library');
    this.myService.sayHi();
  }
}

my.service.ts

import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class MyService {
    constructor() {
        console.log('my service');
    }
    public sayHi() {
        console.log('Hi from sample angular library - my service');
    }
}

我不明白，我在这里发什么信息？或

真的可以在 react 中使用 Angular 服务吗？

Answer 1

应检索Angular注入器以访问服务，如this answer所示：

@NgModule({ imports: [BrowserModule] })
export class AppModule {
  ngDoBootstrap() {}  
}

export default class App extends React.Component {
  async componentDidMount() {
    const appModule = await platformBrowserDynamic().bootstrapModule(AppModule);
    const myService = appModule.injector.get(MyService);
    ...
  }
  ...
}

不可能在 React 组件类上使用 @inject 装饰器，因为类是由 React 实例化的，而不是由 Angular 或 Inversify 实例化的。

Inversify 的灵感来自 Angular DI，但它们不兼容且不应混合使用。如果 MyService 被注册为 Angular Injectable 的服务，则应该从 Angular 而不是 Inversify 容器中检索它。

Answer 2

是的，如果您在 React 中使用 Typescript，这是可能的。您正在为 DI 使用 inversify？