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',
    },]},

我遇到错误

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

我该如何解决：

要让模板加载相应的网址？
当我将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>

我的家庭主要内容组件代码如下：

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

此设置同样适用于我的管理路由配置文件。这就是为什么我得到错误时会感到困惑。我想知道这可能是因为我的路径有一个空字符串，还是因为主路由配置文件中存在homecomponent代码？

Answer 1

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>

Answer 2

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

我只是简单地将父路由命名为home并创建了Home路由模块主要路由模块的代码为：

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',
    },
    ]},
  ]

Angular 7无法加载html模板，但url可以正确解析

2 个答案: