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

Question

我绝对是React的初学者。我仅使用App Component创建一个简单的react应用，并且我拥有带有简单服务的自己的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');
    }
}

我不明白，我在这里发短信吗？或

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

Answer 1

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

http://localhost:8090/api/auth/forgot 400


HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "OK", url: "http://localhost:8090/api/auth/forgot", ok: false, …}
error: {timestamp: "2019-05-07T10:53:58.230+0000", status: 400, error: "Bad Request", message: "Required String parameter 'email' is not present", path: "/api/auth/forgot"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:8090/api/auth/forgot: 400 OK"
name: "HttpErrorResponse"
ok: false
status: 400
statusText: "OK"
url: "http://localhost:8090/api/auth/forgot"

在React组件类上不能使用@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而不是Angular或Inversify实例化的。

Inversify受到Angular DI的启发，但它们不兼容且不应混用。如果@inject已通过Angular MyService注册为服务，则应从Angular而不是Inversify容器中检索它。

Answer 2

是的，如果您在React中使用Typescript，这是可能的。您正在使用Inverseify进行DI吗？