Angular 路由:延迟加载后,页面重定向到默认路由
Angular Routing : After lazy loading , page is redirecting to default route
我的angular6 应用程序中有两个模块,一个是应用程序模块,另一个是用户模块,我正在尝试实现用户模块的延迟加载。如果我手动点击 URL 则路由有效,然后显示来自用户模块的正确页面。但是当我尝试从 header 组件导航时,它不会导航到用户页面,而是转到默认页面。
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)
我认为您刚刚将 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 { }
一切都按预期工作 - 请查看上面的 link - 希望这对你有帮助 - 快乐编码:)
更新
终于花了很多时间找到问题并解决它 - 但问题似乎很小,足以占用我们的时间:) - 是的,问题是 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
不要 bootstrap 在这里你的 bootstrap 应该只在 app.module
所以你的路由 @NgModule()
应该是这样的
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
用户-routing.module.ts
您需要导出您的 RouteModule
并从您的 LazyModule
读取它,因此您的路由 @NgModule()
应该是这样的
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class UserRoutingModule { }
这就是解决所有问题所需要的,您的代码可以完美运行 - 随时分享您的疑虑 - 干杯快乐编码:)
我的angular6 应用程序中有两个模块,一个是应用程序模块,另一个是用户模块,我正在尝试实现用户模块的延迟加载。如果我手动点击 URL 则路由有效,然后显示来自用户模块的正确页面。但是当我尝试从 header 组件导航时,它不会导航到用户页面,而是转到默认页面。
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)
我认为您刚刚将 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 { }
一切都按预期工作 - 请查看上面的 link - 希望这对你有帮助 - 快乐编码:)
更新
终于花了很多时间找到问题并解决它 - 但问题似乎很小,足以占用我们的时间:) - 是的,问题是 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
不要 bootstrap 在这里你的 bootstrap 应该只在 app.module
所以你的路由 @NgModule()
应该是这样的
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
用户-routing.module.ts
您需要导出您的 RouteModule
并从您的 LazyModule
读取它,因此您的路由 @NgModule()
应该是这样的
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class UserRoutingModule { }
这就是解决所有问题所需要的,您的代码可以完美运行 - 随时分享您的疑虑 - 干杯快乐编码:)