1

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

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

在此处输入图像描述

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

应用程序.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>
    )
  }
}

容器配置.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 };

这是角代码

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();
  }
}

我的.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 服务吗？

4

2 回答 2

1

应检索 Angular 注入器以访问服务，如以下答案所示：

@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);
    ...
  }
  ...
}

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

Inversify 受到 Angular DI 的启发，但它们不兼容且不应混合使用。如果MyService使用 Angular 注册为服务Injectable，则应从 Angular 而非 Inversify 容器中检索它。

于 2019-05-07T08:17:09.373 回答
0

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

于 2019-11-14T11:02:39.487 回答