使用新的Angular 4前端连接旧系统

Question

我们正在将我们的系统转换到Angular 4。由于转换将需要一些时间，我们希望一个接一个地将我们的组件转换为angular，并让angular包裹我们的旧页面，并像现在一样与新的angular组件一起运行。在我们目前的系统是运行在多个帧，标题，导航，工作区。我们正在移除新的角度系统中的框架。

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

我见过从component.html启动iframe，然后将侦听器附加到该框架上的任何内容以捕获onClicks的代码。我希望评估旧系统中的这些单击操作，然后确定是否允许href (等)。继续使用或重新路由到新的angular路由器(即: this.router.navigate('/customer') )并停止所请求的事件。我能够让大部分代码正常工作，但是当我的新函数运行时，它无法访问组件所需的部分，因此找不到方法和属性。(像str.replace()，str.match()，它们是与regexp结合使用的普通javascript方法，但也包括组件中包含的属性，如router.navigate)

这可以做到吗?或者有更好的方法来实现这一点吗？

我还查看了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 
}

提前感谢您的帮助。罗布·汤普森

Answer 1

我不确定这是否对你有任何帮助，但我们已经通过忽略angular的路由在现有应用程序之上拼接angular取得了相当令人满意的结果，只是慢慢地用angular组件替换了旧的服务器站点生成的html。

如果我理解正确的话，您希望iframe中的href导航到angularJS中的页面。我们使用的方法实际上是让它导航到页面，然后该页面的html将是

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

这将显示我们的组件

转换完成后，您可以切换到完整的角度包含。路由。