路由器的子项未加载

Question

我目前正在构建一个具有固定菜单的仪表板， 但内容是动态的。

我想要实现的是，当我更改URL时，将我的内容组件加载到其他组件中。

因此：仪表板/主页应获取仪表板的主页组件 仪表板/链接应加载仪表板的链接组件等。

这是我的路由器：

const routes: Routes = [
  { path: '', component: HomepageComponent },
  { path: 'link/:trackId', component: LinkComponent },
  { path: 'dashboard', component: DashboardComponent, 
    children: [
      { path: '', component: DashboardContentHomeComponent, outlet:   'dashboardcontent'},
      { path: 'links', component: DashboardContentLinksComponent, outlet:   'dashboardcontent'}
    ]
  },  
  { path: '*', redirectTo: ''},
];

现在我的仪表板组件如下所示：

<div class="dashboard-holder">
  <app-login *ngIf="!authService.afAuth.auth.currentUser"></app-login>
  <app-dashboard-menu *ngIf="authService.afAuth.user | async" class="dashboard-menu"></app-dashboard-menu>
  <app-dashboard-content *ngIf="authService.afAuth.user | async" class="dashboard-content"></app-dashboard-content>
</div>

仪表盘内容组件如下所示：

<router-outlet name="dashboardcontent"></router-outlet>

现在出现问题： 当转到“ URL” /仪表盘时，DashboardContentHomeComponent会正确加载！

但是当导航到“ URL” /仪表板/链接时，出现以下错误：

我确实没有弄错我在做什么，并且我已经在这个看似非常简单的功能上工作了3个小时...

有人对如何解决此问题有任何想法吗？

Answer 1

我建议使用类似的结构

dashboard <-- have a guard against unauthed users
  links
login <-- have the guard redirect to login

首先在您的router-outlet模板中放置一个AppComponent。

然后将DashboardModule中的模板更改为：

<app-dashboard-menu class="dashboard-menu"></app-dashboard-menu>

<div class="dashboard-holder">
  <router-outlet></router-outlet>
</div

然后我将有一个 root （AppRoutingModule）路由配置，例如：

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
  { path: 'dashboard': loadChildren: './routes/dashboard/dashboard.module#DashboardModule'},
  { path: 'login': loadChildren: './routes/login/login.module#LoginModule'},
  { path: '**', redirectTo: 'dashboard'}
];

然后针对您要在信息中心中显示的每个功能，创建功能模块并将其作为DashboardModule的子代：

const routes: Routes = [
  { path: '', component: DashboardComponent, 
    children: [
      { path: 'links', loadChildren: './routes/links.module#LinksModule'},
    ]
  }
];

如您所见，这极大地提高了应用程序的简单性和可伸缩性，并消除了对命名商店的需求。让您更轻松地处理应用程序中的导航。我希望这会有所帮助。