要在Angular路由器中捕获iframe中的URL,可以使用Angular的ActivatedRoute服务。以下是一个示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
iframeUrl: string;
constructor() {
this.iframeUrl = 'https://example.com'; // 替换为实际的iframe URL
}
}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit(): void {
this.route.queryParams.subscribe(params => {
const url = params['url'];
console.log('URL from iframe:', url);
// 在这里处理从iframe中捕获到的URL
});
}
}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
const routes: Routes = [
{ path: '', component: ParentComponent, children: [
{ path: 'child', component: ChildComponent }
] }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ParentRoutingModule { }
现在,当iframe加载完成并传递URL参数时,子组件的ngOnInit方法将被调用,并且可以通过路由参数访问到URL。