Question

我们正在将我们的系统转换为Angular 4.由于转换需要一些时间，我们希望将我们的组件逐个转换为角度并在我们的旧页面周围进行角度环绕并像它们一样运行现在与新的角度组件配合使用。在我们当前的系统中运行多个框架，标题，导航，工作区域。我们正在删除新角度系统中的帧。

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

我看过代码从component.html启动iframe，然后附加一个侦听器来捕获onClicks到该框架上的任何内容。我想评估来自旧系统的那些点击操作，然后确定是否允许href（etc ..）继续使用或重新将其重新路由到新的角度路由器（即：this.router.navigate（[＆＃39; / customer＆＃39;]））并停止所请求的活动。我能够完成大部分工作，但是当我的新功能运行时，它无法访问所需的组件，找不到方法和属性。（像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 
}

提前感谢您的帮助。 Rob Thompson

Answer 1

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

如果我理解您的情况，您希望iframe中的hrefs导航到angularJS中的页面。我们使用的方法是让我们实际让它导航到页面，然后该页面的html就是

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

将显示我们的组件

转换完成后，您可以切换到全角度incl。路由。

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

1 个答案: