Угловая маршрутизация: после отложенной загрузки страница перенаправляется на маршрут по умолчанию - PullRequest
Новая
       7

Угловая маршрутизация: после отложенной загрузки страница перенаправляется на маршрут по умолчанию

0 голосов
/ 24 ноября 2018

У меня есть два модуля в моем приложении angular 6, один из которых является модулем приложения, а другой - пользовательским модулем. Я пытаюсь реализовать отложенную загрузку пользовательского модуля.Маршрутизация работает, если я вручную нажимаю на URL, тогда отображается правильная страница из пользовательского модуля.Но когда я пытался перейти от компонента заголовка, он не переходил на страницу пользователя, а вместо этого переходил на страницу по умолчанию.

Header.html 

<form class="form-inline my-2 my-lg-0">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit" routerLink="/user/login">Login</button>
      <button class="btn btn-secondary my-2 my-sm-0" type="submit" routerLink="/user/register">Register</button>
    </form>

app-routing-module 

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';

const routes: Routes = [
  {
    path:'welcome',
    component:WelcomeComponent
  },
  {
    path:'user',
    loadChildren:'./user/user.module#UserModule'
  },
  {
    path: '', 
    redirectTo: 'welcome', 
    pathMatch: 'full' },
  { 
    path: '**', 
    component: PagenotfoundComponent 
  }
];

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

Модуль маршрутизации пользователей 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';

const routes: Routes = [
  {
    path:'login',
    component: LoginComponent
  },
  {
    path:'register',
    component:RegisterComponent
  },
  {
    path:'',
    redirectTo:'login',
    pathMatch:'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

Модуль приложения 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    WelcomeComponent,
    PagenotfoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Поэтому, когда я нажимаю кнопку входа в систему, я вижу страницу входа, но сразу же она перенаправляется на приветствиестраница (http://localhost:4200/welcome)

1 Ответ

0 голосов
/ 24 ноября 2018

Я думаю, что вы только что сопоставили router-outlet с неверным компонентом - пожалуйста, проверьте, что

Я пробовал ваш тот же сценарий в stackblitz , пожалуйста, посмотрите

app.component.html 

<form class="form-inline my-2 my-lg-0">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit" routerLink="/user/login">Login</button>
      <button class="btn btn-secondary my-2 my-sm-0" type="submit" routerLink="/user/register">Register</button>
    </form>

<router-outlet></router-outlet>

app.module.ts 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes} from '@angular/router';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

const routes: Routes = [
  {
    path:'welcome',
    component:HelloComponent
  },
  {
    path:'user',
    loadChildren:'./modules/lazy/lazy.module#LazyModule'
  },
  {
    path: '', 
    redirectTo: 'welcome', 
    pathMatch: 'full' 
  }

];

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(routes) ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Все работает, как и ожидалось - пожалуйста, посмотрите нассылка выше - надеюсь, это поможет вам - Счастливое кодирование:)

Обновление

Наконец, потребовалось много времени, чтобы найти и решить проблему - но проблема, похоже,быть достаточно маленьким, чтобы съесть наше время :) - Да, проблема заключалась в теге button с типом submit, который слишком заключен в тег form - Это вызывает проблему и заставляет страницу перезагружаться, поскольку предполагается, чтоформа была отправлена, и приложение отображает component назад

Итак, первое исправление в вашем header.component.html либо удалите тег form, либо измените тип button на type="button", если не изменитеэто к тегу anchor 

<form class="form-inline my-2 my-lg-0">
        <button class="btn btn-secondary my-2 my-sm-0" type="button" [routerLink]="['user']">Login</button>
        <button class="btn btn-secondary my-2 my-sm-0" type="button" routerLink="/user/register">Register</button>
      </form>

Это решит вашу проблему полностью - остальное исправлениянужно сделать исходя из вашего удобства

app-routing.module.ts

Не загружайте здесь, ваш загрузчик должен быть только на app.module, поэтомуВаша маршрутизация @NgModule() должна быть такой: 

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

user-routing.module.ts

Вам необходимо экспортировать RouteModule и прочитать его с вашегоLazyModule так что ваша маршрутизация @NgModule() должна быть такой 

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class UserRoutingModule { }

Это все, что нужно, чтобы все исправить, и ваш код работает отлично - просто не стесняйтесь делиться своими проблемами - ура! Happy coding:)

...