将 Angular 应用程序与 ReactJS 应用程序连接起来? [英] Connect Angular application with ReactJS app?
问题描述
我有一个 Angular 应用程序和我想用 ReactJS 编写的应用程序的某些部分.
如何将 ReactJS 应用程序注入现有的 Angular 应用程序?我还需要组件的双向通信.
简介:您可以拥有不同的环境、不同的用例和不同的需求.请记住，此解决方案只有一些方法可以触发您发明不同的东西 - 更适合您的用例.
两种不同的解决方案示例:
- 无需通信的 Angular-ReactJS
- Angular-ReactJS 与双向通信
下面的所有代码都是最小的，可以在所呈现的步骤中显示问题.在 GitHub 上，你有一个完整的代码来解决一个问题，下面的例子并不总是 1:1，因为这段代码是扩展的.
没有通信的Angular-ReactJS
要将 ReactJS 应用程序添加到现有的 Angular 应用程序中，您需要安装 5 个 npm 依赖项:react、react-dom:
npm install --save reactnpm install --save react-domnpm install --save-dev @types/reactnpm install --save-dev @types/react-domnpm install --save-dev @types/react-select下一步 - 我们应该允许在 .tsx 文件中使用 jsx 模板，所以我们应该编辑 tsconfig.json，并添加:
<代码>{...编译器选项":{…jsx":反应"}如果你使用 WebStorm，你应该重启你的项目，因为 TSLint 在重启前会显示错误.
为了保持结构清晰，我创建了这样的目录结构:
角度/ng-hero.component.ts//Angular 中的组件react-renderer.component.ts//无通信的 ReactJS 渲染器反应/react-application.tsx//反应初始化应用程序react-hero.tsx//反应英雄组件应用程序组件.htmlapp.component.ts现在你需要在 Angular 中创建一个特殊的组件，它将负责嵌入 ReactJS 应用程序.这个组件我将调用 ReactRendererComponent.这个组件非常简单，它只有一个模板行，一个带有import Injector的构造函数和一行ngOnInit:
@Component({选择器:'app-react-renderer'，模板:`<div class="react-container";id="react-renderer"></div>`})导出类 ReactRendererComponent 实现 OnInit {构造函数(公共注入器:注入器){}ngOnInit() {ReactApplication.initialize('react-renderer', this.injector);}}现在我们需要 ReactApplication 组件来初始化 ReactJS 应用程序:
interface IReactApplication {喷油器:喷油器；}类 ReactApp 扩展了 React.Component{构造函数(道具){超级(道具)；}使成为() {返回 (<div className={'renderer'}><h2>ReactJS 组件:</h2><br/><ReactHero/> );}}导出类 ReactApplication {静态初始化(容器 ID:字符串，喷油器:喷油器){ReactDOM.render(<ReactApp 注入器={注入器}/>,document.getElementById(containerId));}}
我们需要在下面的例子中使用的 ReactHero 组件:
class ReactHero 扩展 React.Component{构造函数(道具){超级(道具)；}使成为() {返回 (<跨度><span>react-hero 作品！</span><br/><span>没有任何数据</span></span>);}}导出默认 ReactHero； 在 Angular App 中我们应该使用 ReactRenderer 组件，所以我们使用:
App.component 数据:<小时><h2>这是Angular</h2><图像宽度=100"alt=角度标志"SRC ="数据:图像/SVG + xml的; BASE64，PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8 + CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8 + CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg =="><小时><!-- 没有数据绑定--><app-react-renderer></app-react-renderer>此时我们有一个带有嵌入式 ReactJS 应用程序的 Angular 应用程序，但没有任何通信.对你来说够了吗?如果是，那就是全部.如果您需要在两个应用程序之间进行任何类型的通信，我会在下面为您提供 RxJS 选项.
Angular-ReactJS 与双向通信
在这个例子中，你有 RxJS 支持的双向数据绑定.您可以获取这些数据，并在您的 ReactJS 应用程序和 Angular 应用程序中使用它们来查看所有更改.这对于很多项目来说已经足够了，但是您可以使用不同的选项来获得这种双向通信，例如，您可以为它们使用 Redux.
为了清楚起见，下面我给出了这部分的完整目录结构:
角度/英雄服务.tsng-hero.component.ts//Angular 中的组件react-bidirectional-renderer.component.ts//具有双向通信的 ReactJS 渲染器模型/hero.ts//Hero 对象的接口双向反应react-bidirectional-application.tsx//使用双向通信反应初始化应用程序react-bidirectional-hero.tsx//React hero 组件支持 RxJS应用程序组件.htmlapp.component.ts首先，我们用数据创建IHero接口:/model/hero.ts
导出接口 IHero {名称:字符串；年龄:数量；}下一步我们创建 angular/hero.service.ts 服务，以在应用程序的 Angular 部分使用它:
@Injectable({提供在:'根'})导出类 HeroService {私人英雄$:BehaviorSubject= 新行为主题([])；构造函数(){}addHeroes(hero: IHero) {//添加新英雄const actualHero = this.heroes$.value;actualHero.push(hero);this.heroes$.next(actualHero);}updateHeroAge(heroId: number, age: number) {//更新选中英雄的年龄const actualHero = this.heroes$.value;actualHero[heroId].age = 年龄；this.heroes$.next(actualHero);}getHeroes$(): BehaviorSubject{//获取 BehaviorSubject 并将其传递给 ReactJS返回 this.heroes$;}} 在 app.component.ts 中，我们用数据(宙斯和波塞冬)初始化:
@Component({选择器:'app-root'，templateUrl: './app.component.html'})导出类 AppComponent 实现 OnInit {public heroObj$: BehaviorSubject;公共英雄:IHero[];构造函数(私有 heroService:HeroService){}ngOnInit(): 无效 {this.heroService.getHeroes$().subscribe((res: IHero[]) => {this.heroes = res;});this.heroesObj$ = this.heroService.getHeroes$();this.initHeroes();}initHeroes() {this.heroService.addHeroes({name: 'Zeus', age: 88});this.heroService.addHeroes({name: 'Poseidon', age: 46});}} 下一步我们应该准备应用程序的ReacJS部分，所以我们创建react-bidirectional/react-bidirectional-application.tsx文件:
interface IReactBidirectionalApp {喷油器:喷油器；英雄$:行为主题;//我们使用这个接口来抓取 RxJS 对象}类 ReactBidirectionalApp 扩展了 React.Component{构造函数(道具){超级(道具)；this.state = {hero$: this.props.heroes$//我们将这些数据传递给 ReactBidirectionalHero 组件};}使成为() {返回 (<div className={'renderer'}><h2>ReactJS 组件(双向数据绑定):</h2><ReactBidirectionalHero hero$={this.state.heroes$}/> );}}导出类 ReactBidirectionalApplication {静态初始化(容器 ID:字符串，注射器:注射器，hero$: BehaviorSubject 下一步我们需要 现在我们需要在Angular应用程序中初始化ReactJS应用程序，所以我们创建 现在我们应该改变一点 ReactBidirectionalHero组件，所以我们创建它:interface IReactBidirectionalHero {英雄$:行为主题angular/react-bidirectional-renderer.component.ts - 非常简单，与没有通信的版本相比只有一个变化:@Component({选择器:'app-react-owc-renderer'，模板:`<div class="react-container";id="react-owc-renderer"></div>`})导出类 ReactBidirectionalRendererComponent 实现 OnInit {//Hire 我们从父组件获取数据，当然，如果我们喜欢这种方式，我们也可以直接从 HeroService 订阅这些数据@Input() hero$: BehaviorSubjectng-hero.component.ts 以查看所有效果:@Component({选择器:'app-ng-hero'，模板:`<div><span>ng-hero 作品！</span><br/><span *ngFor="让英雄中的英雄；let i = index;">{{hero.name}} - {{hero.age}} - <button (click)=addAge(i)">Add {{hero.name}}年龄</button><br/></span><br/><按钮(点击)=addHero()">添加AFRODITA</button>
`})导出类 NgHeroComponent 实现 OnInit {公共英雄:IHero[];构造函数(私人英雄服务:英雄服务){}ngOnInit() {this.heroService.getHeroes$().subscribe((res: IHero[]) => {this.heroes = res;});}addAge(heroId: number) {this.heroService.updateHeroAge(heroId, this.heroes[heroId].age + 1);}添加英雄(){this.heroService.addHeroes({name: 'Afrodita', age: 23});}}
最后，我们修改app.component.html:
App.component 数据:<小时><h2>这是 Angular 组件:</h2><app-ng-hero></app-ng-hero><小时><!-- 使用双向数据绑定--><app-react-owc-renderer [heroes$]=heroesObj$"></app-react-owc-renderer><小时>一切都应该有效.如果您有任何问题，请随时提出.
您可以在 GitHub 上找到此解决方案的完整存储库.
如果您要查找演示，请点击hire.
一些额外的想法
如您所见，我仅介绍了解决此问题的两种方法.这里只是一些提示，可以让您有更广阔的视野，并让您有可能找到更适合您的用例的解决方案.
- Store - 通过使用 Redux 在 Angular 和 React 应用程序之间共享 Store - 这种方法非常好，因为您不需要关心在组件之间传递数据.这种方法有一些潜在的问题——如果 React 应用程序修改了 store 并且你订阅了这些数据，请记住 NG 更改检测的潜在问题.在某些情况下，在 Angular 应用程序之外修改的数据可能会成为问题，因此请牢记这一点.
- Iframe - 这是在 Angular 应用程序中执行任何类型的仅使用 ReactJS 组件而无需双向通信的最简单方法.您可以只在 URL 的查询参数中传递一些数据并呈现 React 组件.
- Preact.js - 如果您只想使用一个简单的 React 组件但又担心包的大小，那么这是一个非常好的方法.Preact 提供了许多 React 功能，但它确实很小，因此您的构建和客户不会对您的技术海市蜃楼产生任何影响.
I have a Angular app and some part of application I want write in ReactJS.
How can I inject ReactJS app into existing Angular application? I need also bidirectional communication for components.
INTRO: You can have different environments, different use cases, and different needs. Please remember that there are only some approaches to this solution that can just trigger you to invent something different - a better suited for your use case.
Two different solutions with example:
- Angular-ReactJS without communication
- Angular-ReactJS with bidirectional communication
All code below is minimal to show a problem on a presented step. On GitHub, you have a complete code to solve a problem, not always 1:1 with the example below because this code is extended.
Angular-ReactJS without communication
To add ReactJS app into existing Angular application you need to install 5 npm dependencies: react, react-dom:
npm install --save react
npm install --save react-dom
npm install --save-dev @types/react
npm install --save-dev @types/react-dom
npm install --save-dev @types/react-select
Next step - we should permit to use jsx template in .tsx files, so we should edit tsconfig.json, and add:
{
...
"compilerOptions": {
…
"jsx": "react"
}
If you use WebStorm you should restart your project because a TSLint shows an error till restart.
To keep a clear structure, I create this structure of directory:
angular /
ng-hero.component.ts // Component in Angular
react-renderer.component.ts // ReactJS renderer without communication
react /
react-application.tsx // React init application
react-hero.tsx // React hero component
app.component.html
app.component.ts
Now you need to create a special component in Angular, which will be responsible for embedding the ReactJS application. This component I will call ReactRendererComponent. This component is very simple and it has only one template line, a constructor with import Injector and one line in ngOnInit:
@Component({
selector: 'app-react-renderer',
template: `<div class="react-container" id="react-renderer"></div>`
})
export class ReactRendererComponent implements OnInit {
constructor(public injector: Injector) { }
ngOnInit() {
ReactApplication.initialize('react-renderer', this.injector);
}
}
Now we need ReactApplication component where we initialize the ReactJS app:
interface IReactApplication {
injector: Injector;
}
class ReactApp extends React.Component<IReactApplication, any> {
constructor(props) {
super(props);
}
render() {
return (
<div className={'renderer'}>
<h2>ReactJS component: </h2>
<br/>
<ReactHero/>
</div>
);
}
}
export class ReactApplication {
static initialize(
containerId: string,
injector: Injector
) {
ReactDOM.render(
<ReactApp injector={injector}/>,
document.getElementById(containerId)
);
}
}
And we need ReactHero component which was used in the example below:
class ReactHero extends React.Component<any, any> {
constructor(props) {
super(props);
}
render() {
return (
<span>
<span>react-hero works!</span><br/>
<span>Don't have any data</span>
</span>
);
}
}
export default ReactHero;
In Angular App we should use ReactRenderer component, so we use:
App.component data:
<hr>
<h2>This is Angular</h2>
<img width="100" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
<hr>
<!-- Without data binding -->
<app-react-renderer></app-react-renderer>
At this moment we have an Angular app with an embedded ReactJS app, but without any communication. Is it enough for you? If yes, it's all. If you need any kind of communication between both applications, I present you the RxJS option below.
Angular-ReactJS with bidirectional communication
In this example, you have bidirectional data binding supported by RxJS. You can get this data, and use them in your ReactJS app and Angular app to see all changes. This is enough for a lot of projects, but you can use different options to get this bidirectional communication, for example, you can use Redux for them.
To keep it clear, below I present a complete directory structure for this part:
angular /
hero.service.ts
ng-hero.component.ts // Component in Angular
react-bidirectional-renderer.component.ts // ReactJS renderer with bidirectional communication
model /
hero.ts // interface for Hero object
react-bidirectional
react-bidirectional-application.tsx // React init application with bidirectional communication
react-bidirectional-hero.tsx // React hero component with RxJS support
app.component.html
app.component.ts
First of all, we create IHero interface with data: /model/hero.ts
export interface IHero {
name: string;
age: number;
}
In the next step we create angular/hero.service.ts service, to use it in the Angular part of application:
@Injectable({
providedIn: 'root'
})
export class HeroService {
private heroes$: BehaviorSubject<IHero[]> = new BehaviorSubject([]);
constructor() {
}
addHeroes(hero: IHero) { // To add new hero
const actualHero = this.heroes$.value;
actualHero.push(hero);
this.heroes$.next(actualHero);
}
updateHeroAge(heroId: number, age: number) { // To update age of selected hero
const actualHero = this.heroes$.value;
actualHero[heroId].age = age;
this.heroes$.next(actualHero);
}
getHeroes$(): BehaviorSubject<IHero[]> { // To get BehaviorSubject and pass it into ReactJS
return this.heroes$;
}
}
And in app.component.ts we initialize with data (Zeus and Poseidon):
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
public heroesObj$: BehaviorSubject<IHero[]>;
public heroes: IHero[];
constructor(private heroService: HeroService) {}
ngOnInit(): void {
this.heroService.getHeroes$().subscribe((res: IHero[]) => {
this.heroes = res;
});
this.heroesObj$ = this.heroService.getHeroes$();
this.initHeroes();
}
initHeroes() {
this.heroService.addHeroes({name: 'Zeus', age: 88});
this.heroService.addHeroes({name: 'Poseidon', age: 46});
}
}
In the next step we should prepare the ReacJS part of the application, so we create react-bidirectional/react-bidirectional-application.tsx file:
interface IReactBidirectionalApp {
injector: Injector;
heroes$: BehaviorSubject<IHero[]>; // We use this interface to grab RxJS object
}
class ReactBidirectionalApp extends React.Component<IReactBidirectionalApp, any> {
constructor(props) {
super(props);
this.state = {
heroes$: this.props.heroes$ // and we pass this data into ReactBidirectionalHero component
};
}
render() {
return (
<div className={'renderer'}>
<h2>ReactJS component (bidirectional data binding): </h2>
<ReactBidirectionalHero heroes$={this.state.heroes$}/>
</div>
);
}
}
export class ReactBidirectionalApplication {
static initialize(
containerId: string,
injector: Injector,
heroes$: BehaviorSubject<IHero[]>, // This is necessary to get RxJS object
) {
ReactDOM.render(
<ReactBidirectionalApp injector={injector} heroes$={heroes$}/>,
document.getElementById(containerId)
);
}
}
In the next step we need ReactBidirectionalHero component, so we create it:
interface IReactBidirectionalHero {
heroes$: BehaviorSubject<IHero[]>;
}
class ReactBidirectionalHero extends React.Component<IReactBidirectionalHero, any> {
constructor(props) {
super(props);
this.state = {
heroes: []
};
this.addAge = this.addAge.bind(this); // Register function to bump age
this.addHero = this.addHero.bind(this); // Register function to add new Hero
}
componentDidMount(): void {
// In componentDidMount we subscribe heroes$ object
this.props.heroes$.subscribe((res: IHero[]) => {
// and we pass this data into React State object
this.setState({heroes: res});
});
}
addAge(i: number) {
const temp = this.state.heroes;
temp[i].age = temp[i].age + 1;
// In this way we update RxJS object
this.props.heroes$.next( temp);
}
addHero() {
const temp = this.state.heroes;
temp.push({name: 'Atena', age: 31});
// In this way we update RxJS object
this.props.heroes$.next(temp);
}
render() {
// Hire we render RxJS part of application with addAge button and ADD ATENA button below
const heroes = this.state.heroes.map((hero: IHero, i) => {
return <span key={i}>{hero.name} - {hero.age} <button onClick={() => this.addAge(i)}>Add {hero.name} age</button><br/></span>;
});
return (
<span>
<span>react-hero works!</span><br/>
{heroes}
<br/>
<button onClick={this.addHero}>ADD ATENA</button>
</span>
);
}
}
export default ReactBidirectionalHero;
Now we need to initialize ReactJS app in Angular application, so we create angular/react-bidirectional-renderer.component.ts - it's very simple, with only one changes in comparison to version without communication:
@Component({
selector: 'app-react-owc-renderer',
template: `<div class="react-container" id="react-owc-renderer"></div>`
})
export class ReactBidirectionalRendererComponent implements OnInit {
// Hire we get data from the parent component, but of course, we can also subscribe this data directly from HeroService if we prefer this way
@Input() heroes$: BehaviorSubject<IHero[]>;
constructor(public injector: Injector) { }
ngOnInit() {
// We add only one parameter into initialize function
ReactBidirectionalApplication.initialize('react-owc-renderer', this.injector, this.heroes$);
}
}
And now we should change a little ng-hero.component.ts to see all effect:
@Component({
selector: 'app-ng-hero',
template: `
<div>
<span>ng-hero works!</span><br/>
<span *ngFor="let hero of heroes; let i = index;">{{hero.name}} - {{hero.age}} - <button (click)="addAge(i)">Add {{hero.name}} age</button><br/></span>
<br/>
<button (click)="addHero()">ADD AFRODITA</button>
</div>
`
})
export class NgHeroComponent implements OnInit {
public heroes: IHero[];
constructor(private heroService: HeroService) { }
ngOnInit() {
this.heroService.getHeroes$().subscribe((res: IHero[]) => {
this.heroes = res;
});
}
addAge(heroId: number) {
this.heroService.updateHeroAge(heroId, this.heroes[heroId].age + 1);
}
addHero() {
this.heroService.addHeroes({name: 'Afrodita', age: 23});
}
}
Finally, we change app.component.html:
App.component data:
<hr>
<h2>This is Angular component: </h2>
<app-ng-hero></app-ng-hero>
<hr>
<!-- With bidirectional data binding-->
<app-react-owc-renderer [heroes$]="heroesObj$"></app-react-owc-renderer>
<hr>
And everything should work. If you have any problems, feel free to ask.
Complete repository with this solution you can find on GitHub.
If you look for a demo, click hire.
Some extra ideas
As you can see I introduce just two approaches to this problem. Here just some tips that could give you a wider view and give you some possibility to find your own better suit solutions for your use case.
- Store - share Store between Angular and React application by using Redux - this approach is really nice because you don't need to care about passing data between components. There are some potential problems with this approach - if React application modifies the store and you subscribe to those data please remember about potential problems with NG change detection. Data modified outside of Angular applications could be a problem in some cases so keep it in mind.
- Iframe - this is the simplest way to do any kind of just usage ReactJS component in Angular app without bidirectional communication. You can just pass some data in query params of the URL and render React component.
- Preact.js - this is really nice approach if you just would like to use a simple react component but you worry about bundle size. Preact gives a lot of React features but it is really small so your build and customer doesn't feel any influence on your technology mirage.
这篇关于将 Angular 应用程序与 ReactJS 应用程序连接起来?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
