Question

我正在Angular 6中创建一个管理和用户应用程序，到目前为止，我有两个延迟加载的模块UserModule和AdminModule。我的应用程序主路由看起来像

const routes: Routes =
[
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'user',    loadChildren: './user/user.module#UserModule'},
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule'  },
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: '**', redirectTo: 'page-not-found'},
];

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

我的用户模块仅包含user.module和user-routing.module，在模块内部，它具有多组件外观

const routes: Routes = [
  {
    path: '',
    component: IndexComponent,
    children: [
      {path: '', component: IndexComponent },
      {path: 'login', component: LoginComponent },
      {path: 'Register', component: RegistrationComponent },

    ]
  }
];

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

其中之一是带有<app-login></app-login>的主页，带有导航栏和URL，当我尝试导航到URL时遇到错误：

未捕获的错误：语法错误，无法识别的表达式：/ user / login

我的菜单是

<ul class="navbar-nav ml-auto">
    <li class="nav-item">
        <a class="nav-link page-scroll" routerLink="Register" routerLinkActive='active'>Register</a>
    </li>
    <li class="nav-item">
        <a class="nav-link page-scroll" routerLink='login' routerLinkActive='active'>login</a>
    </li>
</ul>

导航到子页面时哪里出错？

Answer 1

您需要查看路由结构，因为每个路由级别都需要自己的路由器出口

这里是工作示例link

在路由HomeRoutingModule的模块中，您需要删除空的子级别

@Entity
@Table(name = "Categories")
public class Category extends AuditingModel {


    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    public Integer categoryId;
    public String CategoryName;

    @NotNull
    @Size(max = 250)
    public String Description;


 //gettter and setters
}

Answer 2

我已经更改了我的应用结构，现在所有人都可以正常使用

角延迟加载模块导航到子问题

2 个答案: