Step3：Angular 3种路由导航方式

1. 仅在app-routing.module.ts实现，直接导航到各个页面中。

// app-routing.modules.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes} from '@angular/router';
import { LoginComponent } from './login/login/login.component';
import { LoginModule } from './login/login.module';
import { RegisterComponent } from './login/register/register.component';
const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full'},
    { path: 'login', component: LoginComponent},
    { path: 'register', component: RegisterComponent}
];

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

export class AppRoutingMoudle {}

<!-- 导航到注册页面-->
<p>还没有账户？<a routerLink="/register">注册</a></p>

2. 不导入LoginModule模块，由app-routing.modules.ts和login-routing.modules.ts实现。

// app-routing.modules.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes} from '@angular/router';
const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full'},
    { path: 'login', loadChildren: './login/login.module#LoginModule'}
];

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

export class AppRoutingMoudle {}

// login-routing.modules.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
const routes: Routes = [
    { path: '', component: LoginComponent},
    { path: 'register', component: RegisterComponent},
];

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

export class LoginRoutingModule { }

<!-- 导航到注册页面-->
<p>还没有账户？<a routerLink="/login/register">注册</a></p>

3. 导入LoginModule模块，由app-routing.modules.ts和login-routing.modules.ts实现。（一般导入LoginModule模块并不在app-routing.modules.ts中，而是在app.modules.ts中）

// app-routing.modules.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes} from '@angular/router';
import { LoginModule } from './login/login.module';
const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full'}
];

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

export class AppRoutingMoudle {}

// login-routing.modules.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
const routes: Routes = [
    { path: 'login', component: LoginComponent},
    { path: 'register', component: RegisterComponent},
];

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

export class LoginRoutingModule { }

<!-- 导航到注册页面-->
<p>还没有账户？<a routerLink="/register">注册</a></p>

持续更新中……