如何将网站加载为 iframe On 按钮单击并将参数传递给 Angular 中的 URL

Question

所以我有两个不同的角度项目。一个是登陆页网站，另一个是出售书籍的网站。

登录页组件的URL中有路由参数(http://localhost:8000/landing/RwgnUvDpEicFA5pWF)和一个按钮：

<button type="button" class="btn btn-primary">Buy Books</button>

如果书籍以iframe的形式出售，我希望这个按钮加载其他网站，同时在点击时将路由参数传递到其URL。

有人知道我该怎么做吗？

Answer 1

您需要执行相当多的步骤才能实现。

1. 为按钮mouseup或click事件绑定事件处理程序
2. 获取当前路由器端点并将其附加到您的iframe url
3. 对iframe url进行消毒
4. 设置boolean标志以显示iframe

组件

import { Component, OnInit, OnDestroy } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
iframeUrl: string;
showIframe = false;
routerSubscription: any;
constructor(private _router: Router, private _sanitizer: DomSanitizer) { }
ngOnInit() {
}
public mouseUp(event: any) {
this.routerSubscription = this._router.events.filter(e => e instanceof NavigationEnd).subscribe(
event => {
this.iframeUrl = "url to iframe/" + event['urlAfterRedirects'];
this.iframeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(this.iframeUrl);
this.showIframe = true;
}
);
}
ngOnDestroy() {
if(this.routerSubscription) {
this.routerSubscription.unsubscribe();
}
}
}

模板

<button type="button" class="btn btn-primary" (mouseup)="mouseUp($event)">Buy Books</button>
<ng-container *ngIf="showIframe">
<iframe [src]="iframeUrl" width="100%" height="100%" frameBorder="0" scrolling="no">Alternative text</iframe>
</ng-container>