Angular 2延迟加载重定向到空白页面-Java 学习之路

我更改了我的angular 2脚本并创建了一个新的功能模块，其中包含注册和登录页面的组件：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { SignupComponent } from './signup/signup.component';
import { SigninComponent } from './signin/signin.component';
import { NotfoundComponent } from '../notfound/notfound.component';
import { ChildRoutingModule } from './auth.route';
@NgModule({
    declarations:[
        SignupComponent,
        SigninComponent,
        NotfoundComponent
    ],

    imports:[
        FormsModule,
        HttpModule,

        ChildRoutingModule
    ]
})

export class AuthModule{}

当然我创建了一个名为 ChildRoutingModule 的子路由文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';

const childRoutes: Routes = [
    {path: 'signup', loadChildren: './auth.module#AuthModule'},
    {path: 'signin', component: SigninComponent}

];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(childRoutes)
  ],
  exports:[RouterModule]
})
export class ChildRoutingModule { }

在这个路由文件中，我使用以下命令创建了一个延迟加载到主页：

{path: 'signup', loadChildren: './auth.module#AuthModule'},

正如您在AuthModule导出的类中看到的那样 .

这是父根模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './auth/signin/signin.component';
import { SignupComponent } from './auth/signup/signup.component';
import { NotfoundComponent } from './notfound/notfound.component';
import { ChildRoutingModule } from './auth/auth.route';
import { HomeComponent } from './home/home.component';

const appRoutes: Routes = [
    //{path: '', redirectTo:'signup', pathMatch:'full'},
    {path: '', component: HomeComponent},

    {path: '**', component: NotfoundComponent}
];

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

这是父模块app.module：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

import {RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { AuthModule } from './auth/auth.module';

import {AuthService} from './auth/auth.service';

import { AppRoutingModule } from './routes';
import { ChildRoutingModule } from './auth/auth.route';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    ChildRoutingModule,
    BrowserModule,
    AuthModule,
    RouterModule,
    AppRoutingModule,
    CommonModule

  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我现在的问题是，当我点击主页组件中的注册按钮时：

<h1>Home Page</h1>
<button [routerLink]="['/signup']" type="button" class="btn btn-primary">Register</button>
<hr>
<button type="button" class="btn btn-primary">Login</button>

如果home.component.ts中没有脚本，我将使用正确的链接重定向到空白组件：

localhost：4200 /注册

并且在控制台没有错误 .

P.S . ：如果我输入localhost：4200 / singin，它会正常显示登录组件

1 回答

它看起来像你有一个循环依赖 .

AuthModule 将包含 signup 路由的 ChildRoutingModule 导入lamaily-loaded到 AuthModule . 这就是为什么 signin 有效，但 signup 没有，因为 signup 是一个循环依赖 .

EDIT

要解决这个问题，我会改变你的路由 . 首先，我不会创建单独的 NgModules 只是为了保持路由配置 . 将路径配置添加到适当的模块 . 我没有测试过这个确切的代码，但看起来应该是这样的：

//app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NotfoundComponent } from './notfound/notfound.component';

export const ROUTES: Routes = [
    {path: '', component: HomeComponent},
    {path: 'signin', loadChildren: './auth/auth.module#AuthModule'},
    {path: '**', component: NotfoundComponent}
];

在_1099019中使用它：

// app.module.ts

import { ROUTES as appRoutes } from './app.routes';

...

imports: [
    ...
    RouterModule.forRoot(appRoutes)
],

然后对 AuthModule 的路由配置执行类似的操作：

//auth.routes.ts

import { Routes } from '@angular/router';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';

export const ROUTES: Routes = [
    {path: '', component: SigninComponent},
    {path: 'signup', loadChildren: './auth.module#AuthModule'}
];

并将其导入 AuthModule ：

//auth.module.ts

import { ROUTES as authRoutes } from './auth.routes';

imports: [
    ...
    RouterModule.forChild(authRoutes)
]

有了这个，你的整个 AuthModule 被懒散地加载，你的网址与你拥有的一样 .

回复于 2024-04-25T22:43:32+08:00

Angular 2延迟加载重定向到空白页面

1 回答

相关问题