[英]How to migrate existing Angular 2 TypeScript app to ReactJS?
We have an existing codebase which is written in Angular 2 using TypeScript.我们有一个现有的代码库,它是使用 TypeScript 用 Angular 2 编写的。 But now we are planning to migrate the codebase to ReactJS.
但是现在我们计划将代码库迁移到 ReactJS。 I am not very sure how can we do this, without rewriting the entire codebase separately from the existing code.
我不太确定我们如何才能做到这一点,而无需将整个代码库与现有代码分开重写。
What I am looking for a solution that can allow us to use both Angular and React Components and their dependencies working in correlation with each other.我正在寻找一种解决方案,它可以让我们同时使用 Angular 和 React 组件及其相互关联的依赖项。
This is a painfull process but is actually doable.这是一个痛苦的过程,但实际上是可行的。 The resulting app will be eventualy unmainteneable so I suggest you to do this only for the transition to the React app refactored.
生成的应用程序最终将无法维护,因此我建议您仅在过渡到重构的 React 应用程序时执行此操作。
Some examples:一些例子:
Example: Integrating angular-bootstrap-datetimepicker示例:集成 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}} /> ); }
Example: Hacking UI Router示例:入侵 UI 路由器
componentDidMount() { angular.module('ngApp') .run(($state) => { $state.go = (state, params, options) => { console.log('hijacked ui router'); } }) angular.bootstrap(this.container, ['ngApp']); }
Example: Neutralize Angular's location tampering示例:中和 Angular 的位置篡改
angular.module('ngApp', []) .config( ['$provide', function ($provide){ $provide.decorator('$browser', ['$delegate', function ($delegate) { $delegate.onUrlChange = function () {}; $delegate.url = function () { return ""}; return $delegate; }]); }]);
Example: Clean up angular app when component unmounts示例:卸载组件时清理 angular 应用程序
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>' }} /> ) }
Ref: https://medium.com/appifycanada/angular-components-in-react-2c929130f995参考: https : //medium.com/appifycanada/angular-components-in-react-2c929130f995
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.