在 Angular Material (8) 下使用多个 <router-outlet> 不起作用

Question

由于我有更多信息，正在尝试重新定义问题。

我正在使用 Angular Material (8) - 以及 MDBootstrap 包。 我有2个区域。一个是处理登录/授权的区域(AUTH)，另一个是“仪表板”区域（登录后访问）(DASHBOARD)。

这是与 AUTH 和 MYDASHBOARD 一起使用的代码 - Angular 将 AUTH 解释为 primary。我将第二个 router-outlet 定义命名为 mydashboard

app.component.html

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

app-routing.module.ts

const routes: Routes = [
  { path: 'auth', loadChildren: './kdc/authorization/authorization.module#AuthorizationModule' },
  { path: 'dashboard', loadChildren: './kdc/dashboard/dashboard.module#DashboardModule'  },
  { path: '**' , component: PageNotFoundComponent }

];

authorization-routing.module.ts

export const routesAuth : Routes = [
    { path: 'login' , component: LoginComponent },
    { path: 'register' , component: RegisterComponent },
    { path: 'forgot-pass' , component: ForgotPasswordComponent },
];

注意：(AUTH) 的一切工作正常 - 这部分没有任何问题。问题出在（仪表板）

登录后，处理转到仪表板。我使用下面的代码将其发送到仪表板

login.component.ts

onLoginSubmit() {
[... snip ...]
        if (this.in_results.count == 0)
          this.errorMsg = 'EMail/Login ID not found';
        else
          // go ahead and navigate to the HOME page
          this.router.navigate(['/dashboard']);  
[... snip ...]
}

dashboard-routing.module.ts

const dashboardroutes: Routes = [
    { path: 'clients', component: ClientsComponent, outlet: 'contentarea'  },
    { path: '', component: HomeComponent, outlet:'mydashboard' },
];

注意：这里一切正常，仪表板会出现并且存储在<router-outlet name="mydashboard"></router-outlet> 使用菜单会出现问题。

当点击“客户”区域时，我的预期是“客户信息”将被放入 <router-outlet name="contentarea"> </router-outlet>，因为home.component.html 是如何定义的。

home.component.html

[... snip ...]
                       <!-- Collapsible link -->
                            <mdb-accordion-item-body>
                                <ul>
                                    <li>  <a [routerLink]="[{ outlets: { primary: 'mydashboard', contentarea : 'clients' }}]" mdbWavesEffect> Press for clients</a></li> 
                                    <li><a href="#" mdbWavesEffect>Link 2</a></li>
                                </ul>
                            </mdb-accordion-item-body>
                        </mdb-accordion-item>

[... snip ...]
<!--Main Layout-->
<main>
    <div class="container-fluid mt-5">
        <router-outlet name="contentarea"> </router-outlet>
    </div>
</main>
<!--/Main layout-->



[... snip ...]

注意： 处理不去：<router-outlet name="contentarea"> </router-outlet>

代替

它转到：<router-outlet></router-outlet> 位于页面上：app.component.html

问题：为什么要这样做？我做得对吗？有没有更好的方法？

我查看了以下文档

https://stackoverflow.com/questions/53702674/children-routing-not-working-and-application-redirects-to-the-404-page
https://www.tektutorialshub.com/angular/angular-child-routes-nested-routes/
https://stackoverflow.com/questions/52824639/nested-router-outlet-with-name-not-working
https://www.techiediaries.com/angular-router-multiple-outlets/
https://angular.io/guide/router

但目前还没有找到任何东西。

任何信息或想法都将非常感激。

TIA

Answer 1

您是否在父 html 组件中添加了<router-outlet></router-outlet>？

Answer 2

经过研究（我对 Angular 很陌生），我发现我需要以下方法来解决我的问题：

由于我正在使用“延迟加载”，我确保将 xxx-routing.ts 文件中定义的路由正确导入到 xxx-module.ts 文件中（我错过了仪表板设置）

我更改了仪表板设置，以便使用儿童：

app-routing.module.ts

const routes: Routes = [
  { path: 'auth', loadChildren: './kdc/authorization/authorization.module#AuthorizationModule' },

  { path: 'dashboard', loadChildren: './kdc/dashboard/dashboard.module#DashboardModule'  },
  { path: '**' , component: PageNotFoundComponent }
];

dashboard.routing.module.ts

export const dashboardroutes: Routes = [

    { path: 'landing/:id', component: HomeComponent,
        children: [
            { path: 'clients', component: ClientsComponent, outlet: 'contentarea'  },
        ]},
];

我尝试了不同的方法来查看路由器是否正常工作。正是在“游戏时间”期间，我找到了适合我的答案。

<!-- WORKS : http://localhost:4200/dashboard/landing/(contentarea:clients) -->

<!-- NOTES: GOES TO BASE HOME PAGE FOR DASHBOARD: http://localhost:4200/dashboard/landing -->

<!-- 404 RESULT: http://localhost:4200/dashboard/landing/landing 
    <li>  <a [routerLink]="['landing',  { outlets: { contentarea : ['clients']}}] " mdbWavesEffect> Press for clients</a></li> -->

<!-- the one below WORKED:  http://localhost:4200/dashboard/landing/(contentarea:clients) -->
        <li>  <a [routerLink]="[{ outlets: { contentarea : ['clients']}}] " mdbWavesEffect> Press for clients</a></li>

我摆脱了<router-outlet name="mydashboard"><router-outlet>，因为它似乎不需要。我认为路由器可以以“兄弟”关系工作。了解到不同router-outlet定义之间的关系更像是一种“父子”关系。