We are in the process of converting our systems over to Angular 4. Since the conversion will take some time, we were hoping to convert our components one by one into angular and have angular wrap around our old pages and run as they do now in conjunction with the now angular components. In our current system is run in multiple frames, header, navigation, working area. We are removing frames in our new angular system.
Our old system primarily replaces the contents of the the working area with a new html page which is entirely composed on the server. I've seen code to launch an iframe from a component.html and then attach a listener to catch onClicks to anything on that frame. I want to evaluate those click actions from the old system then determine whether to allow the href (etc..) to continue as it use to or re-rout it to the new angular router (ie: this.router.navigate(['/customer']) ) and stop the requested event. I'm able to get most of this to work, but when my new function runs it doesn't have access to needed pieces of the component, methods and properties are not found. (things like str.replace(), str.match() which are normal javascript methods used in conjunction with regexp , but also properties included in the component, like router.navigate) Can this be done or is there a better way to accomplish this? Here is how I am currently trying to do this: 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 } Thanks for any help in advance. Rob Thompson -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
