角度路由问题以在同一个地方打开不同的菜单答案

【问题标题】：Problem with routing in angular to open different menus on the same place角度路由问题以在同一个地方打开不同的菜单
【发布时间】：2020-02-23 05:03:29
【问题描述】：

我是 Angular 的新手。我有这种情况：我的 HomeComponent 在 .html 页面中有一个对 Appmenucomponent 的“引用”。所以，我需要点击不同的菜单（每个都是一个新组件）并在同一个地方（div）打开，比如 HomeComponent。

home.component.html

<div class="wrapper">
  <app-appmenu></app-appmenu>
        <div class="content-wrapper">
          <section class="content-header">
            <section class="content">
                    <h1>Welcome,  {{currentUser.firstName}}!</h1> 
                    <router-outlet></router-outlet>             
            </section>
          </section>
        </div>
</div>

在 Appmenucomponent 的 .html 中，我有一个路由到 Menu1Component 的链接，但我不知道如何在 HomeComponent 的同一个“div”上打开它：

menu1.component.html

  <li ><a [routerLink]="['/menu1']"><i class="fa fa-circle-o" ></i> Menu 1</a></li>

这是我所期望的图像：

app-routing.module.ts

const appRoutes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: ApploginComponent },
  { path: 'menu1', component: Menu1Component},

  // otherwise redirect to home
  { path: '**', redirectTo: '' }
];

home-routing.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
];

app.component.html

<router-outlet></router-outlet>

menu1.component.html

<p>menu1 works!</p>

然后，我也有一个登录组件，它重定向到包含菜单的 HomeComponent。

【问题讨论】：

把放在 homeComponent.html 的 section 标签中。这将适当地将路由器链接加载到路由器插座。
我把和当我点击菜单 1 时打开但不在 homecomponent 的同一个地方。我松开了菜单和另一个左侧 div。
是的。这是的主要组件。这就是您将所有内容放在一起的 app.componet。
分享你的路由！
我已经更新了路由

标签： angular

【解决方案1】：

这很正常，你必须使用：

<router-outlet">
// and here you can add whatever you want
</router-outlet>

【讨论】：

对不起，我做错了什么。我更新了我的代码（homecomponent）以包含路由器插座，当我单击菜单 1 时，Menu1.component.html 的消息出现在所有页面中，实际的“css”消失，包括菜单
我更新了新代码。如果您需要更多，请告诉我。但我的应用程序流程是：LoginCOMponent -> HomeComponent（包含 MenuComponent）。如果我单击菜单 1 和菜单 2（两个组件），它将被重定向到 HomeComponent 的同一位置

【解决方案2】：

检查这个堆栈闪电战。 https://stackblitz.com/edit/angular-router-basic-example 这里同样问题的答案演示。

【讨论】：

感谢您的解决方案。但在本例中，菜单位于 app.component 中。在我的情况下，我有一个登录页面来管理它首先出现，然后重定向到 HomeComponent 放置菜单和主 div 的位置。
如果您将所有组件模板放在 app.component.html 中，那么在 auth.guard 中，如果未登录则需要重定向到 login.html，然后在登录后需要延迟加载 menu1 和菜单 2 组件。为此，您需要定义lazy-routine-module，为此您可以在app-routing-module 中为menu1 和menu2 使用loadchildren