在 Angular Material (8) 下使用多个 <router-outlet> 无效

Question

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

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

这是与 AUTH 和 MYDASHBOARD 一起工作的代码 - AUTH 被 Angular 解释为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 }

];

授权-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 ...]
}

仪表板-routing.module.ts

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

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

当点击 "Clients" 区域时，我的预期是 "Client Information" 会被放入 <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://www.tektutorialshub.com/angular/angular-child-routes-nested-routes/

https://www.techiediaries.com/angular-router-multiple-outlets/
https://angular.io/guide/router

但还没有找到任何东西。

如有任何信息或想法，将不胜感激。

TIA

Answer 1

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

Answer 2

经过研究（我是 Angular 的新手），我发现我需要执行以下操作来解决我的问题：

由于我使用的是 "Lazy Loading"，因此我确保 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 }
];

仪表板。routing.module.ts

export const dashboardroutes: Routes = [

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

我试过各种不同的方法来查看路由器是否正常工作。正是在 "playaround time" 期间，我找到了适合我的答案。

<!-- 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> 因为它似乎不需要。我认为路由器可以在 "sibling" 关系中工作。了解到不同router-outlet定义之间的关系更多的是"parent-child"关系。

在 Angular Material (8) 下使用多个 <router-outlet> 无效

Use of multiple <router-outlet> under Angular Material (8) is not working

angular-routing

angular-material

angular