Угловой 7: Как получить доступ к строке запроса в URL из iframe?

Question

Разрабатываемое приложение размещается в iframe.

В моем приложении настроены следующие маршруты:

    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');

Кажется, ни один из них не работает.URL, который у меня есть для моего приложения, выглядит следующим образом:

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

QueryParamMap или RoutesRecongnized, похоже, не получает строку запроса "id = 3"в URL.Он всегда возвращает ноль.

Кто-нибудь может мне помочь, как получить параметры запроса / строку запроса из url в угловом приложении?

Answer 1

Вместо снимка вам нужно читать через подписку или использовать 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/

Answer 2

Вы должны подписаться на queryParams вместо параметров.См. Ссылку https://angular -2-training-book.rangle.io / handout / routing / query_params.html

Answer 3

Это может вам несколько помочь

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

Answer 4

Поскольку приложение находится под iframe.Вместо того, чтобы делать снимок, вы должны использовать метод подписки для получения параметров. Также проверьте, получает ли фрагмент полный URL после #