Приложение Angular 4 со страницей по умолчанию и параметрами в URL

Мне нужно создать веб-портал, который будет встроен в iFrame.

Вот код, который я использую для загрузки портала

Конфигурация маршрутов

const routes: Routes = [
    {
      path: '',
      redirectTo: '/dashboard',
      pathMatch: 'full'
    },
    {
      path: 'dashboard',
      component: DashboardComponent
    },
    {
      path: 'userinformation',
      component: UserInformationComponent
    }
];

Упрощенный index.html

<!doctype html>
<html lang="en">
<head>
  <base href="/">
</head>
<body>
  <frontend-root></frontend-root>
</body>
</html>

Компонент приложения

import { Component } from '@angular/core';

@Component({
  selector: 'frontend-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'frontend';
}

HTML-код компонента "приложение"

<div style="text-align:center">
  <h1>Portal Main Menu</h1>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col" style="background-color: greenyellow">
      <left-menu></left-menu>
    </div>
    <div class="col-10"  style="background-color: yellow">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

Таким образом, файл app.component.html содержит «маршрутизатор-выход», где будет отображаться моя «панель инструментов» и/или моя «информация о пользователе».

Все работает нормально, за исключением того, что запускающее приложение, которому принадлежит iframe, отправит параметры на мою веб-страницу благодаря URL-адресу, подобному этому:

http://myportal.com/?language=fr&userId=12345

И я хотел бы получить эти параметры из моего AppComponent, который является загрузочным компонентом.

Я попытался использовать следующее решение для получения параметров запроса https://stackoverflow.com/a/39915434/1636492

Но поскольку у меня есть веб-страница «по умолчанию» и выход маршрутизатора, не расположенный в корне моей html-страницы, это не работает.

Вот проблемы, с которыми я столкнулся:

  • Я не могу одновременно использовать компонент и redirectTo в определении маршрута (я использовал route.redirect в свой OnInit в AppComponent)
  • В корневом примере автор поставил тег. Но при включении в моем приложении роутер-розетка там находиться не может.

typescript angular html iframe angular-router
person hugo    schedule 19.09.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Через некоторое время я нашел решение для своего приложения благодаря этой ссылке https://github.com/angular/angular/issues/12157

В AppComponent я использую эту функцию:

function getParameterByName(name: any) {
    const url = window.location.href;
    name = name.replace(/[[]]/g, '\$&');
    const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url);
    if (!results) {
        return null;
    }
    if (!results[2]) {
        return '';
    }
    return decodeURIComponent(results[2].replace('/+/g', ' '));
}

И в ngOnInit AppComponent вы можете получить все необходимые параметры:

ngOnInit(): void {
  let value1 = getParameterByName('value1');
  let value2 = getParameterByName('value2') || ''; // not mandatory
  // do something with value1 & value 2  
}
person hugo    schedule 19.05.2018