использовать угловую маршрутизацию в AngularJS / Angular гибридное приложение перезагрузить всю страницу - PullRequest
Новая
       1

использовать угловую маршрутизацию в AngularJS / Angular гибридное приложение перезагрузить всю страницу

0 голосов
/ 04 сентября 2018

Я пытаюсь выполнить угловую маршрутизацию в своем гибридном приложении AngularJS / Angular. Я создал файл app-routing.module.ts: 

import { ModuleWithProviders } from "@angular/core";
import { Routes, RouterModule, ExtraOptions } from '@angular/router';
import {SignInComponent} from "./modules/login/components/sign-in/sign-in.component";
import {ActivationComponent} from "./modules/login/components/activation/activation.component";

const routes: Routes = [
  {
    path: 'sign-in',
    component: SignInComponent
  },
  {
    path: 'activation',
    component: ActivationComponent
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/activation'
  },
  {
    path: '**',
    pathMatch: 'full',
    redirectTo: '/activation'
  }
];

export const routingModule: ModuleWithProviders = RouterModule.forRoot(routes);

в app.module.ts Я добавил routingModule в массив «import», а в app.component.html добавил: 

<button (click)="goto('sign-in')">go to home</button>
<button (click)="goto('activation')">go to product</button>

<router-outlet></router-outlet>

Когда с помощью index.html я использую только Angular, он отлично работает 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
<app-root></app-root>
</body>

</html>

Но когда я добавляю свой код AngularJS, просто добавляю 

this.upgrade.bootstrap(document.body, ['app']);

Моя текущая угловая маршрутизация вместо этого перезагружает содержимое тега «router-outlet», полностью перезагружает страницу. Если я удалю 

this.upgrade.bootstrap(document.body, ['app']);

работает нормально. У кого-нибудь были подобные проблемы, и, может быть, кто-то может предложить сценарий, как заставить Angular Routing правильно работать с гибридным приложением AngularJS / Angular? Спасибо

1 Ответ

0 голосов
/ 06 сентября 2018

Похоже, что вы неправильно настроили AngularJS и Angular Router, пожалуйста, проверьте следующие шаги-

  1. Маршрут по умолчанию (.otherwise) должен быть удален из маршрутизации AngularJS.

  2. Реализуйте интерфейс UrlHandlingStrategy как часть параметров конфигурации Angular router для обработки маршрутизации для определенных URL-адресов. Это позволит избежать конфликта Angular Router с AngularJS router-

    класс экспорта Ng1Ng2UrlHandlingStrategy реализует UrlHandlingStrategy {

    shouldProcessUrl (url: UrlTree): логическое { return url.toString (). startWith ('/ ng /'); }

    extract (url: UrlTree): UrlTree {возврат URL; } слияние (newUrlPart: UrlTree, rawUrl: UrlTree): UrlTree {return newUrlPart; } }

  3. Добавьте указанный выше класс (Ng1Ng2UrlHandlingStrategy) в качестве поставщика в корневой модуль для стратегии обработки URL-

    провайдеров: [ {предоставить: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy} ]

  4. Добавьте и AngularJS, и Angular outlet / Directive в компонент приложения html 

   <router-outlet></router-outlet>
    <div class="ng-view"></div>

  1. Маршрутизация на основе хэша будет работать, но для поддержки маршрутизации на основе HTML 5 в гибридном приложении требуется setUpLocationSync (обновление). Пожалуйста, обновите файл main.ts, как показано ниже -

    upgrade.bootstrap (document.body, ['app']); setUpLocationSync (обновление);

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...