Как использовать существующий сервис Angular в React? - PullRequest
0 голосов
/ 07 мая 2019

Я абсолютный новичок в Реагировании. Я создаю простое приложение реагирования только с компонентом приложения, и у меня есть собственная угловая библиотека (пакет NPM) с простым сервисом. А сервис Angular имеет некоторые зависимости, заложенные в его конструктор.

Я пытался использовать inversifyJs , но безуспешно. Я получаю следующую ошибку.

enter image description here

и вот мой код реакции - 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>
    )
  }
}

контейнер-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 };

вот угловой код

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 в реакции?

1 Ответ

0 голосов
/ 07 мая 2019

Угловой инжектор должен быть получен для доступа к сервисам, как показано в этом ответе :

@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.

...