代码之家 › 专栏 › 技术社区 › user2439903

Angular7:如何从iframe访问URL中的查询字符串?

angular-cli-v7 query-parameters angular7 angular

6

user2439903 · 技术社区 · 7 年前

我在我的应用程序中配置了以下路由:

    const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'list'
  },
  {
    path: 'list',
    component: ListComponent,
    canActivate: [CanActivateRoute]
  },
  {
    path: 'dashboard',
    loadChildren: './modules/dashboard/dashboard.module#DashboardModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

ListComponent , OnInit

this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log("val.state.root.firstChild.params: " + val.state.root.firstChild.params);
      }
    }); 
const firstParam: string = this.route.snapshot.queryParamMap.get('id');

这些似乎都不管用。

https://company.com/#/app-dev/list?id=3

QueryParamMap 或 RoutesRecongnized 似乎没有在url中获取查询字符串“id=3”。它总是返回null。

有谁能帮我从angular app的url中检索查询参数/查询字符串吗?

4 回复 | 直到 7 年前

1

0

Vipul Handa 7 年前

因为应用程序在iframe下。你应该用快照 subscribe方法获取参数片段抓住你之后的完整url#

2

0

RoseHashmi 7 年前

查询参数 https://angular-2-training-book.rangle.io/handout/routing/query_params.html

3

0

Geethanjana Nallaperumage 7 年前

这可能对你有所帮助

const firstParam: string = this.route.snapshot.params['id'];

4

0

Binu 7 年前

您需要通过订阅或使用Rxjs读取而不是快照

import { ActivatedRoute } from '@angular/router';

export class YourComponent implements OnInit {
    constructor(private activeRoute: ActivatedRoute) {
    }

    ngOnInit() {

    this.activeRoute.queryParams.subscribe(queryParams => {
        this.activeRoute.params.subscribe(routeParams => {
            //you will get query string here
        });
    });
}

浏览Rxjs实现的链接。链接: https://kamranahmed.info/blog/2018/02/28/dealing-with-route-params-in-angular-5/