Как перенести существующее приложение Angular 2 TypeScript в ReactJS? - PullRequest
Новая
       14

Как перенести существующее приложение Angular 2 TypeScript в ReactJS?

0 голосов
/ 14 сентября 2018

У нас есть существующая кодовая база, написанная на Angular 2 с использованием TypeScript.Но теперь мы планируем перенести кодовую базу в ReactJS.Я не очень уверен, как мы можем это сделать, не переписывая всю кодовую базу отдельно от существующего кода.

Что я ищу, чтобы найти решение, которое позволило бы нам использовать как угловые компоненты, так и компоненты React и их зависимости, работающиев корреляции друг с другом.

1 Ответ

0 голосов
/ 14 сентября 2018

Это болезненный процесс, но на самом деле выполнимо.Получившееся приложение будет в конечном итоге не поддерживаемым, поэтому я предлагаю вам сделать это только для перехода к рефакторинному приложению React.

Некоторые примеры:

Пример: интеграция angular-bootstrap-datetimepicker

angular
  .module('ngApp', ['ui.bootstrap.datetimepicker'])

class AngularWidget extends React.Component {
  componentDidMount () {
    angular.bootstrap(this.container, ['ngApp']);
  }
  
  html = `<datetimepicker data-ng-model="data.date"></datetimepicker>`;

  render = () => (
    <div
      ref={c => this.container = c}
      dangerouslySetInnerHTML={{__html: this.html}}
      />
  );
}

Пример: взлом маршрутизатора пользовательского интерфейса 

componentDidMount() {
  angular.module('ngApp')
    .run(($state) => {
      $state.go = (state, params, options) => {
        console.log('hijacked ui router');
      }
    })
  angular.bootstrap(this.container, ['ngApp']);
}

Пример: нейтрализация несанкционированного изменения местоположения Angular 

angular.module('ngApp', [])
    .config( ['$provide', function ($provide){
        $provide.decorator('$browser', ['$delegate', function ($delegate) {
            $delegate.onUrlChange = function () {};
            $delegate.url = function () { return ""};
            return $delegate;
        }]);
    }]);

Пример: очистить угловое приложение, когда компонент демонтируется 

class AngularWidget extends React.Component {
  componentDidMount() {
    this.$rootScope = angular.injector(['ng', 'ngApp']).get('$rootScope');
    angular.bootstrap(this.container, ['ngApp']);
  }
  componentWillUnmount() {
    this.$rootScope.$destroy();
  }
  render = () => (
    <div
      ref={c => { this.container = c; }}
      dangerouslySetInnerHTML={{ __html: '<widget></widget>' }}
    />
  )
}

Ссылка: https://medium.com/appifycanada/angular-components-in-react-2c929130f995

...