1

我在 Angular 中遇到了一些简单的路由管理：我有第一个模块：

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { RouterModule } from '@angular/router';
import { LayoutComponent } from './ui/components/layout/layout.component';


const routes: Routes = [{ path: '**',
     component: LayoutComponent,
     children: [    { path: '', redirectTo: '/posts', pathMatch: 'full'},
    { path: 'posts',loadChildren: './posts/posts.module#PostsModule' }] }];

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

以及应该显示简单的“它有效”组件的“PostModule”：

import { NgModule } from '@angular/core';\n
import { Routes } from '@angular/router';\n
import { RouterModule } from '@angular/router';
import { PostsComponent } from './containers/posts/posts.component';
import { ProfileComponent } from './containers/profile/profile.component';

const routes: Routes = [{ path: '', component: PostsComponent },{ path: ':profileId', component: ProfileComponent },];

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

但没有一条路线

http://localhost:4200/posts/

http://localhost:4200/posts/1

显示预期内容

我想我错过了一些简单的东西，我的 app.component 看起来像这样：

   <router-outlet>
      <router-outlet></router-outlet>
   </router-outlet>

我已经阅读了一些关于“延迟加载”的帖子，但是我所写的内容与我到目前为止所学的内容似乎是一致的，错误在哪里？

4

3 回答 3

2

问题似乎在于您构建路由的方式。它应该这样配置：

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: 'posts', loadChildren: './posts/posts.module#PostsModule' }
    ]
  },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

“路径：'**'”的想法是处理您在浏览器中输入的任何未定义路由（即/hello-world）并重定向到根目录或您选择的任何其他已定义路由。

因此，按照您定义的方式，路由始终捕获导航并显示 LayoutComponent。

于 2019-11-14T17:01:32.193 回答
1

您使用的是哪个 Angular 版本？您是否尝试过以下操作？

const routes: Routes = [{
  path: '**',
  component: LayoutComponent,
  children: [
    { path: '', redirectTo: '/posts', pathMatch: 'full' },
    { path: 'posts', loadChildren : () => import('./posts/posts.module').then(x => x.PostsModule) }
  ]
}];



更新：

路由器添加到路由器出口的组件添加在外部下面router-outlet，因此在内部添加一些东西是没有意义的。

内部router-outlet需要移动到LayoutComponent组件中，由路由器添加。

于 2019-11-14T16:41:06.427 回答
0

首先尝试执行以下操作：

   <router-outlet>
      <p>Layout Component loaded</p>
      <router-outlet></router-outlet>
   </router-outlet>

然后，如果您的登录页面中写入了某些内容，请将第二个路由器插座放入您的 LayoutComponent。

为了在一个模板中并排使用多个插座，您需要使用命名的路由器插座。

于 2019-11-14T16:47:08.297 回答