存在多个路由模块时的路由

Question

我正在尝试使用 Angular 13 创建博客。我想将管理页面与主页分开。我有 3 个路由模块。应用-routing.module.ts:

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

const routes: Routes = [
  //blog routes
  {
    path: '',
    redirectTo: '/blog',
    pathMatch: 'full' //means path needs to be full match with what has been configured.
  },
  {
    path: 'blog',
    loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) //() means Function
    //we use loadChildren when we want to use lazy loading. The other option is 'children'.
  },
  //auth routes
  {
    path: '',
    redirectTo: '/auth',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
  }
];

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

博客-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BlogComponent } from '../layout/blog/blog.component';
import { FocusContentComponent } from '../layout/blog/focus-content/focus-content.component';

const blogRoutes: Routes = [
  {
    path: '',
    component: BlogComponent
  },
  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: 'mainpost',
        component: FocusContentComponent,
        outlet: 'post'
      }
    ]
  }
];

auth-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthComponent } from '../layout/auth/auth.component';

const routes: Routes = [
  {
    path: '',
    component: AuthComponent
  },
  {
    path: 'auth',
    component: AuthComponent
  }
];

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

问题是我使用http://localhost:4200/blog/mainpost时出现了路由问题。控制台显示

cannot match any routes. URL Segment: 'blog/mainpost'

blog.component.html 是：

<!DOCTYPE html>
<html lang="en" dir="rtl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta
      name="author"
      content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
    />
    <meta name="generator" content="Hugo 0.88.1" />
    <title>Science Blog</title>
  </head>

  <body>
    <app-header></app-header>

    <main class="container">
      <app-focus-content></app-focus-content>

      <app-important-content></app-important-content>

      <div class="row g-5">
        <div class="col-md-8">
          <!-- <app-main-body> -->
          <router-outlet name="post"></router-outlet>
          <!-- </app-main-body> -->
        </div>

        <div class="col-md-4">
          <app-history-pannel></app-history-pannel>
        </div>
      </div>
    </main>
    <app-footer></app-footer>
  </body>
</html>

我该如何解决这个问题？

Answer 1

在您的应用模块中

{
    path: 'blog',
    loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule)
}

这是路线/blog。

然后在您的博客模块中您有

  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: 'mainpost',
        component: FocusContentComponent,
        outlet: 'post'
      }
    ]
  }

路线/blog/blog和/blog/blog/mainpost。

尝试移动上面路线中的children

const blogRoutes: Routes = [
  {
    path: '',
    component: BlogComponent,
    children: [
      {
        path: 'mainpost',
        component: FocusContentComponent,
        outlet: 'post'
      }
    ]
  }
];

存在多个路由模块时的路由

Routing when there is multiple routing modules

angular

routes

lazy-loading