Angular 7 不加载 html 模板，但 url 正确解析

Question

我的代码：

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  children: [
    {
      path: '',
      component: ComponentOne,
      outlet: 'homeMainContent',
      pathMatch: 'full'
    },]},

    {
      path: 'list',
      component: ListComponent,
      outlet: 'homeMainContent',
    },

  {
  path: 'auth',
  loadChildren: 'app/auth/auth.module#AuthModule'
}, {
  path: 'admin',
  loadChildren: 'app/admin/admin.module#AdminModule'
}];

当我访问列表组件时，url 正确解析但 html 模板没有改变。

如果我将 ComponentOne 和 ListComponent 路由放在同一个子数组中，如下所示：

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  children: [
    {
      path: '',
      component: ComponentOne,
      outlet: 'homeMainContent',
      pathMatch: 'full'
    },
    {
      path: 'list',
      component: ListComponent,
      outlet: 'homeMainContent',
    },]},

我收到一个错误

错误：无法匹配任何路由。

我该如何解决：

1. 要使用相应的 url 加载模板？
2. 当我将 ComponentOne 和 ListComponent 路由放在同一个子数组中时，如何避免错误（如果可能）？

我已经看到了几个答案，包括这个answer，但它们并没有解决我的问题。

---

更新： 这是我的 HomeComponent 代码

<div class="body">
  <div class="box">
    <div class="one"><home-left-content></home-left-content></div>
    <div class="two"><home-main-content></home-main-content></div>
    <div class="three"><home-right-content></home-right-content></div>
  </div>
</div>

而我的 home-main-content 组件代码如下所示：

<div>
    <router-outlet name="homeMainContent"></router-outlet>
</div>

同样的设置适用于我的管理路由配置文件。这就是为什么当我收到错误时我很困惑。我想知道可能是因为我的路径是空的，还是因为主路由配置文件中存在 homecomponent 代码？

Answer 1

感谢this blog 我能够解决我的问题。

我只是将父路由命名为 home 并创建了一个 home-routing 模块 主路由模块的代码是：

const routes: Routes = [{
  path: '',
  redirectTo: 'home',
  pathMatch: 'full',
  },
  {
  path: 'home',
  loadChildren: 'app/home/home.module#HomeModule'
  },
  {
  path: 'auth',
  loadChildren: 'app/auth/auth.module#AuthModule'
  }, 
  {
  path: 'admin',
  loadChildren: 'app/admin/admin.module#AdminModule'
}];

主路由模块的路径是：

const routes: Routes = [{
  path: 'home',
  component: HomeComponent,
  children: [
    {
      path: '',
      component: ComponentOne, // main home view
      outlet: 'homeMainContent',
    },
    {
      path: 'list',
      component: ListComponent,
      outlet: 'homeMainContent',
    },
    ]},
  ]

Answer 2

app-routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {PrimiryOneComponent} from './primiry-one/primiry-one.component';
import {PrimiryTwoComponent} from './primiry-two/primiry-two.component';
import {SecondaryOneComponent} from './secondary-one/secondary-one.component';
import {SecondaryTwoComponent} from './secondary-two/secondary-two.component';
import {PrimiryThreeComponent} from './primiry-three/primiry-three.component';
import {SecondaryThreeComponent} from './secondary-three/secondary-three.component';

const routes: Routes = [
  {
    path: '',
    component: PrimiryOneComponent,
  },
  {
    path: 'two',
    component: PrimiryTwoComponent,
  },
  {
    path: 'three',
    component: PrimiryThreeComponent,
  },
  {
    path: '',
    component: SecondaryOneComponent,
    outlet: 'secondary',
  },
  {
    path: 'two',
    component: SecondaryTwoComponent,
    outlet: 'secondary',
  },{
    path: 'three',
    component: SecondaryThreeComponent,
    outlet: 'secondary',
  },
];

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

app.component.html

<ul>
  <li>
    <a [routerLink]="[{outlets: { primary: null } }]">go to primary-one</a>
  </li>

  <li>
    <a [routerLink]="['two']">go to primary-two</a>
    <!--equal to <a [routerLink]="[{outlets: { primary: 'two' } }]">go to primary-two</a>-->
  </li>

  <li>
    <a [routerLink]="['three']">go to primary-three</a>
    <!--equal to <a [routerLink]="[{outlets: { primary: 'three' } }]">go to primary-three</a>-->
  </li>

  <li>
    <a [routerLink]="{outlets: { secondary: null } }">go to secondary-one</a>
  </li>

  <li>
    <a [routerLink]="{outlets: { secondary: 'two' } }">go to secondary-two</a>
  </li>

  <li>
    <a [routerLink]="{outlets: { secondary: 'three' } }">go to secondary-three</a>
  </li>

  <li>
    <a [routerLink]="[{outlets: { primary: 'two', secondary: 'three' } }]">go to primary-two and secondary-three</a>
  </li>

  <li>
    <a [routerLink]="['']">go to primary-one and secondary-one</a>
     <!--equal to <a [routerLink]="[{outlets: { primary: null, secondary: null } }]">go to primary-one and secondary-one</a>-->
  </li>
</ul>
<router-outlet></router-outlet>
<router-outlet name="secondary"></router-outlet>