Question

我试图在Angular 2模板中渲染一个react组件。为此，我已将反应渲染dom包含在角度2组件的模板html中。然后使用角度组件的ngAfterViewInit生命周期钩子，我已将react组件脚本导入模板html。当我们第一次加载屏幕或刷新屏幕时，react组件会正确呈现。但是如果我们改变路线并再次回到这条路线，我们可以看到反应组件没有在DOM元素的位置渲染。所有脚本都正确加载。

以reacttest.html为模板的Angular 2组件。

import { Component } from '@angular/core';
import '../../externalScript.js';
declare var loadExternalScript:any;

@Component({
  selector: 'view',
  templateUrl: '../../views/html/reacttest.html'
})
export class CanvasComponent {

  constructor() {}

  ngAfterViewInit() {
    //loading react components 
    loadExternalScript.readyReactComponents();
   }   
}

reacttest.html with react render DOM

<!-- Property model dialog -->
  <div id="property-dialog"></div>

加载反应组件的脚本

var loadExternalScript = (function() {
  return {
    readyReactComponents: function(){
        System
        .import ('public/react/js/componentPropertiesApp.js')
        .catch(function (err) {
            console.error(err);
        });
  }
})()

这里我使用Angular 2路由器进行路由，因此当我们更改路由时，angular 2正在更改其组件并重新加载组件和与之关联的模板html。它的所有生命周期方法都被正确调用，但有些反应认为反应组件已经加载到该DOM中，并且它没有重新渲染。我也在想反应是将它缓存到某个地方，因为如果我们刷新页面，那么反应组件会再次渲染。

在Angular2组件模板中呈现React组件html

0 个答案: