时间戳

首页 > 解决方案 > 角度路由：延迟加载后，页面重定向到默认路由

angular - 角度路由：延迟加载后，页面重定向到默认路由

问题描述

我的 Angular 6 应用程序中有两个模块，一个是应用程序模块，另一个是用户模块，我正在尝试实现用户模块的延迟加载。如果我手动点击 URL，则路由有效，然后显示来自用户模块的正确页面。但是当我尝试从标题组件导航时，它不会导航到用户页面，而是会转到默认页面。

页眉.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>

应用路由模块

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）

标签： angularangular-ui-router

解决方案

我认为您只是将您的组件映射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类型为 as 的标签，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>

这将完全解决您的问题 - 其余的修复需要根据您的方便进行

应用程序路由.module.ts

不要在这里引导你的引导应该只在app.module所以你的路由@NgModule()应该是这样的

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

用户路由.module.ts

您需要导出RouteModule并从中读取它，LazyModule因此您的路由@NgModule()应该是这样的

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

这就是解决所有问题所需的一切，并且您的代码可以完美运行 - 随意分享您的担忧 - 欢呼快乐编码:)

推荐阅读