将旧系统与新的Angular 4前端连接

问题描述：

我们正在将我们的系统转换为Angular 4.由于转换需要一段时间，我们希望将我们的组件逐个转换成角度并且有角度环绕我们的旧页面并像现在一样与新的角度组件一起运行。在我们当前的系统中运行多个帧，标题，导航，工作区。我们正在删除我们新角系统中的框架。将旧系统与新的Angular 4前端连接

我们的旧系统主要是用一个完全由服务器组成的新html页面来替换工作区域的内容。

我见过代码从component.html启动一个iframe，然后附加一个监听器来捕获onClicks到该框架上的任何东西。我想评估旧系统中的这些点击动作，然后确定是否允许href（etc ..）继续使用，或者将它重新路由到新的角度路由器（例如：this.router.navigate（[''/customer']））并停止请求的事件。我能够获得大部分工作，但是当我的新功能运行时，它无法访问组件的所需部分，找不到方法和属性。（像str.replace（），str.match（）这些是与正则表达式结合使用的正常javascript方法，但也包含在组件中的属性，比如router.navigate）str0.r312更好的方法来完成这个？

我也看过了alt-angularjs-migration-using-iframes-demo，我遇到了同样的情况。

这里是我当前如何试图做到这一点：

contact.component.html

<div class="iBody1" (click)="onRightClick($event)">  
<iframe #iframe [src]="'https://www.volgistics.com/ex/Cp.dll?ACT=7' + 
urlUserStr | safeUrl" (load)="myFunction()" 
id="work1" name="WorkArea" scrolling="no" marginwidth="0" marginheight="0" 
frameborder="no" > 


<p>Your browser does not support iframes.</p> 
</iframe> 
</div>

contact.component.ts

myFunction() { 
let doc = this.iframe.nativeElement.contentDocument ||this.iframe.nativeElement.contentWindow; 
if (typeof doc.addEventListener !== undefined) { 
    doc.addEventListener("click", this.iframeClickHandler, false) 
} else if (typeof doc.attachEvent !== undefined) { 
    doc.attachEvent("onclick", function (this) {this.iframeClickHandler(this)}) 
} 
} 

iframeClickHandler(e): void { 
e.preventDefault(); 

let vars : string = e.target; 

let rx = new RegExp("([^?=&]+)(=([^&]*))?", "g"); 

let xx = rx.exec(vars); 

// let var1 : String = vars.match(/(\?|\&)([^=]+)\=([^&]+)/g).toString(); // match is undefined if used 
// let var2 : String = JSON.parse('{"' + decodeURI(var1.replace(/\?/g, "").replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}') // replace is undefined if used 

    this.router.navigate(['/customer/100100109']);  // Uncaught TypeError: Cannot read property 'navigate' of undefined 
}

感谢提前任何帮助。罗布汤普森

答

我不知道如果这能帮助你以任何方式，但我们忽略角的路由，只是慢慢地更换产生的旧服务器站点实现与现有应用程序的顶部拼接角相当令人满意的结果HTML有角度的组件。

如果我正确理解您的情况，您希望从iframe中的hrefs导航到angularJS中的页面。我们采用的方法是，我们会真正让它导航到该页面，然后该页面的HTML也只是

<our-new-component></our-new-component>

一旦转换完成后，其将显示我们的组件

，你可以切换到完整的角度。路由。

将旧系统与新的Angular 4前端连接

相关推荐