Question

我在路由我的应用时遇到了问题。我尝试了所有可能的方式，但我没有任何帮助。它导航到auth但是当添加的子路径没有加载任何东西时，在auth.component中是的，给出了两个链接，但它们都没有工作..

应用-routing.module.ts

import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { AuthComponent} from './auth/auth.component';
import {LoginComponent} from './auth/login/login.component';
import { RegisterComponent} from './auth/register/register.component';
import { AuthGuard } from './authguard';

const routes: Routes = [
  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
  { path: 'auth' , component: AuthComponent,
    children: [ {
      path: '',
      component: LoginComponent},
    {
      path: 'login',
      component: LoginComponent },
    {
      path: 'register',
      component: RegisterComponent},
],
},
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

const config: ExtraOptions = {
  useHash: true,
};

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

AUTH-routing.module.ts

import { NgModule } from '@angular/core';
import { ExtraOptions, RouterModule, Routes } from '@angular/router';

import { AuthComponent } from './auth.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

const routes: Routes = [{
  path: '',
  component: AuthComponent,
    children: [ {
    path: '',
    component: LoginComponent,
  },
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'register',
    component: RegisterComponent,
},
],
}];

const config: ExtraOptions = {
  useHash: true,
};
@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports : [RouterModule],
})
export class AuthRoutingModule { }

auth.component.html

<h1>Angular Router</h1>
<nav>
  <a routerLink="/login" routerLinkActive="active">Crisis Center</a>
  <a routerLink="/register" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>

Answer 1

对于子模块路由，您需要使用

[RouterModule.forChild(routes)],

此外，

尝试在app模块中导入AuthRoutingModule，因为它不是延迟加载的模块。来自AuthRoutingModule的路由未加载，因为它是一个单独的模块

在子级中的Angular 4路由，导航...多重redirectTo不支持

1 个答案: